-Fixed: ReactDOM.render is no longer supported in React 18 #441

examples/react/src/hooks.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import React, { useCallback, useState } from 'react';
+import ReactDOM from 'react-dom/client';
 import ReactFullpage from '../../../components';
 import Styles from './styles.css';
 
@@ -15,12 +15,16 @@ const pluginWrapper = () => {
 
 const
   originalColors = ['#ff5f45', '#0798ec', '#fc6c7c', '#435b71', 'orange', 'blue', 'purple', 'yellow'],
-  originalPages = [{ text: "Section 1" }, { text: "Section 2" }, { text: "Section 3" }];
+  originalPages = [{ text: "Section 1" }],
+  originalSlides = [{ text: "Slide1" }, { text: "Slide2" }, { text: "Slide3" }];
 
 const Hooks = () => {
+  console.warn("....");
+
   const
     [sectionsColor, setsectionsColor] = useState([...originalColors]),
-    [fullpages, setfullpages] = useState([...originalPages]);
+    [fullpages, setfullpages] = useState([...originalPages]),
+    [slides, setSlides] = useState([...originalSlides]);
 
   const
     onLeave = (origin, destination, direction) => {
@@ -52,9 +56,22 @@ const Hooks = () => {
       return setfullpages(newPages)
     },
 
+
     moveSectionDown = () => {
       return fullpage_api.moveSectionDown();
-    }
+    };
+
+    const handleRemoveSlide = useCallback(() => {
+      setSlides((prevSlides) => prevSlides.slice(0, -1));
+    }, [setSlides]);
+
+
+    const handleAddSlide = useCallback(() => {
+      setSlides((prevSlides) => [
+        ...prevSlides,
+        { text: `Slide${prevSlides.length + 1}` },
+      ]);
+    }, [setSlides]);
 
   const Menu = () => (
     <div
@@ -68,7 +85,9 @@ const Hooks = () => {
       <ul className="actions">
         <li>
           <button onClick={handleAddSection}> Add Section </button>
+          <button onClick={handleAddSlide}> Add Slide </button>
           <button onClick={handleRemoveSection}> Remove Section </button>
+          <button onClick={handleRemoveSlide}> Remove Slide </button>
           <button onClick={handleChangeColors}> Change background colors </button>
           <button onClick={moveSectionDown}> Move Section Down </button>
         </li>
@@ -92,12 +111,18 @@ const Hooks = () => {
         sectionSelector={SECTION_SEL}
         onLeave={onLeave}
         sectionsColor={sectionsColor}
+        slidesNavigation ={true}
+        observer={false}
 
         render={() => (
           <ReactFullpage.Wrapper>
             {fullpages.map(({ text }) => (
               <div key={text} className={SEL}>
-                <h1>{text}</h1>
+                {slides.map(({ text }) => (
+                  <div key={text} className="slide">
+                    <h3>{text}</h3>
+                  </div>
+                ))}
               </div>
             ))}
           </ReactFullpage.Wrapper>
@@ -106,5 +131,6 @@ const Hooks = () => {
     </div>
   );
 }
-const rootElement = document.getElementById('react-root');
-ReactDOM.render(<Hooks />, rootElement);
+
+const root = ReactDOM.createRoot(document.getElementById('react-root'));
+root.render(<Hooks />);

examples/react/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import ReactFullpage from '../../../components';
 import Styles from './styles.css';
 
@@ -144,5 +144,6 @@ class App extends React.Component {
   }
 }
 
-const rootElement = document.getElementById('react-root');
-ReactDOM.render(<App />, rootElement);
+
+const root = ReactDOM.createRoot(document.getElementById('react-root'));
+root.render(<App />);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullpage/react-fullpage",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "Official react wrapper for fullPage.js",
   "author": "cmswalker",
   "contributors": [
@@ -55,8 +55,8 @@
     "node-sass": "6.0.1",
     "prettier": "^2.3.2",
     "prettier-eslint": "^13.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-testing-library": "^5.4.4",
     "sass-loader": "12.1.0",
     "style-loader": "3.2.1",
@@ -68,6 +68,6 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
-    "fullpage.js": "^4.0.30"
+    "fullpage.js": "^4.0.31"
   }
 }