chore: remove deprecated ReactDOM.render in example app

Author: karl-run

example/index.html

@@ -15,6 +15,6 @@
     </noscript>
 
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>

example/src/App.jsx

@@ -12,14 +12,24 @@ const App = () => {
     <div>
       <header className="bg-purple-700 p-2 flex gap-3 flex-col md:flex-row justify-between m-2 rounded text-white items-center border-2 border-purple-950">
         <h1 className="text-xl">react-bottom-scroll-listener</h1>
-        <div className="flex gap-6">
-          <label htmlFor="alert-state" className="flex justify-center gap-3">
+        <div className="flex gap-6 pt-2">
+          <label
+            htmlFor="alert-state"
+            className="flex justify-center gap-3 flex-col md:flex-row items-center md:items-start"
+          >
             <span>Use {alertOnBottom ? 'alert dialog' : 'console.log'}</span>
-            <Toggle id="alert-state" checked={alertOnBottom} onChange={() => setAlertOnBottom((b) => !b)} />
+            <div>
+              <Toggle id="alert-state" checked={alertOnBottom} onChange={() => setAlertOnBottom((b) => !b)} />
+            </div>
           </label>
-          <label htmlFor="use-hook-state" className="flex justify-center gap-3">
+          <label
+            htmlFor="use-hook-state"
+            className="flex justify-center gap-3 flex-col md:flex-row items-center md:items-start"
+          >
             <span>Use {hookExample ? 'hook' : 'component'}</span>
-            <Toggle id="use-hook-state" checked={hookExample} onChange={() => setHookExample((b) => !b)} />
+            <div>
+              <Toggle id="use-hook-state" checked={hookExample} onChange={() => setHookExample((b) => !b)} />
+            </div>
           </label>
         </div>
       </header>

example/src/ComponentExample.jsx

@@ -1,57 +1,60 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 
-import 'react-toggle/style.css';
+import 'react-toggle/style.css'
 
-import { BottomScrollListener } from 'react-bottom-scroll-listener';
+import { BottomScrollListener } from 'react-bottom-scroll-listener'
 
 class ComponentExample extends Component {
   handleOnDocumentBottom = () => {
-    console.log('I am at bottom! ' + Math.round(performance.now()));
+    console.log(`I am at bottom! ${Math.round(performance.now())}`)
 
     if (this.props.alertOnBottom) {
-      alert('Bottom hit! Too slow? Reduce "debounce" value in props');
+      alert('Bottom hit! Too slow? Reduce "debounce" value in props')
     }
-  };
+  }
 
   handleContainerOnBottom = () => {
-    console.log('I am at bottom in optional container! ' + Math.round(performance.now()));
+    console.log(`I am at bottom in optional container! ${Math.round(performance.now())}`)
 
     if (this.props.alertOnBottom) {
-      alert('Bottom of this container hit! Too slow? Reduce "debounce" value in props');
+      alert('Bottom of this container hit! Too slow? Reduce "debounce" value in props')
     }
-  };
+  }
 
   render() {
     return (
-      <div className="root">
-        <div className="scroll-box">
-          <h1>Component example</h1>
-          <h2>Callback when document hits bottom</h2>
-          <div>Scroll down! ▼▼▼</div>
-          <div>A bit more... ▼▼</div>
-          <div>Almost there... ▼</div>
-          <div>You've reached the bottom!</div>
-        </div>
-
-        {/* When you only want to listen to the bottom of "document", you can put it anywhere */}
-        <BottomScrollListener onBottom={this.handleOnDocumentBottom} />
-
+      <div>
         {/* If you want to listen for the bottom of a specific container you need to forward
             a scrollRef as a ref to your container */}
         <BottomScrollListener onBottom={this.handleContainerOnBottom}>
           {(scrollRef) => (
-            <div ref={scrollRef} className="inner-scroll-example">
-              <h4>Callback when this container hits bottom</h4>
-              <div>Scroll down! ▼▼▼</div>
-              <div>A bit more... ▼▼</div>
-              <div>Almost there... ▼</div>
-              <div>You've reached the bottom!</div>
+            <div
+              ref={scrollRef}
+              className="md:absolute m-8 md:m-0 top-20 right-12 h-72 md:w-60 bg-purple-200 overflow-auto p-4 border-2 border-purple-950 rounded"
+            >
+              <h4 className="font-bold">Callback when this container hits bottom</h4>
+              <div className="h-44">Scroll down! ▼▼▼</div>
+              <div className="h-44">A bit more... ▼▼</div>
+              <div className="h-44">Almost there... ▼</div>
+              <div className="h-44">You've reached the bottom!</div>
             </div>
           )}
         </BottomScrollListener>
+
+        <div className="mt-16 m-8">
+          <h1 className="text-xl font-bold">Component example</h1>
+          <h2 className="font-bold">Callback when document hits bottom</h2>
+          <div className="h-96 border-2 border-purple-950 mt-4 p-4">Scroll down! ▼▼▼</div>
+          <div className="h-96 border-2 border-purple-950 mt-4 p-4">A bit more... ▼▼</div>
+          <div className="h-96 border-2 border-purple-950 mt-4 p-4">Almost there... ▼</div>
+          <div className="h-96 border-2 border-purple-950 mt-4 p-4">You've reached the bottom!</div>
+        </div>
+
+        {/* When you only want to listen to the bottom of "document", you can put it anywhere */}
+        <BottomScrollListener onBottom={this.handleOnDocumentBottom} />
       </div>
-    );
+    )
   }
 }
 
-export default ComponentExample;
+export default ComponentExample

example/src/HookExample.jsx

@@ -4,15 +4,15 @@ import { useBottomScrollListener } from 'react-bottom-scroll-listener'
 
 const HookExample = ({ alertOnBottom }) => {
   const handleOnDocumentBottom = useCallback(() => {
-    console.log('I am at bottom! ' + Math.round(performance.now()))
+    console.log(`I am at bottom! ${Math.round(performance.now())}`)
 
     if (alertOnBottom) {
       alert('Bottom hit!')
     }
   }, [alertOnBottom])
 
   const handleContainerOnBottom = useCallback(() => {
-    console.log('I am at bottom in optional container! ' + Math.round(performance.now()))
+    console.log(`I am at bottom in optional container! ${Math.round(performance.now())}`)
 
     if (alertOnBottom) {
       alert('Bottom of this container hit!')

example/src/index.css renamed to example/src/global.css

@@ -0,0 +1,10 @@
+import './global.css';
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(<App />);