diff --git a/README.md b/README.md index 535906e..66f49e4 100644 --- a/README.md +++ b/README.md @@ -345,15 +345,14 @@ mobiledoc-specific props: ### React 18 Support - To use custom card & atom components in React 18 without warnings, you can pass a specific ReactDOM version as a prop on the Container: + To use custom card & atom components with React 18 without warnings, you can pass an instance of `createRoot` from react-dom v18 as a prop on the `Container`. Internally, components will render with `createRoot` if available and fallback to the legacy `render`: ```js - import ReactDOM from 'react-dom/client'; + import { createRoot } from 'react-dom/client'; - ...; + ...; ``` - Notice the React 18 specific import path. Internally, components will render with the new `createRoot` API if available and fallback to the legacy `render` method. ## Development diff --git a/demo/index.js b/demo/index.js index 2c818c3..c6252c5 100644 --- a/demo/index.js +++ b/demo/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import ReactDOM from 'react-dom/client'; +import { createRoot } from 'react-dom/client'; import '../node_modules/mobiledoc-kit/dist/mobiledoc.css'; import * as ReactMobiledoc from 'react-mobiledoc-editor'; @@ -46,7 +46,7 @@ const App = () => { {...config} mobiledoc={state} onChange={setState} - ReactDOM={ReactDOM} + createRoot={createRoot} > @@ -58,5 +58,4 @@ const App = () => { ); }; -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +createRoot(document.getElementById('root')).render(); diff --git a/package-lock.json b/package-lock.json index 1251948..a56c262 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-mobiledoc-editor", - "version": "0.14.0", + "version": "0.14.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-mobiledoc-editor", - "version": "0.14.0", + "version": "0.14.1", "license": "BSD-3-Clause", "dependencies": { "prop-types": "^15.8.1" diff --git a/package.json b/package.json index b727dd6..e210ad4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-mobiledoc-editor", - "version": "0.14.0", + "version": "0.14.1", "description": "A Mobiledoc editor for React apps", "repository": "joshfrench/react-mobiledoc-editor", "homepage": "https://github.com/joshfrench/react-mobiledoc-editor", diff --git a/src/components/Container.js b/src/components/Container.js index c844d41..39cda36 100644 --- a/src/components/Container.js +++ b/src/components/Container.js @@ -31,7 +31,7 @@ class Container extends React.Component { placeholder, serializeVersion, spellcheck, - ReactDOM, + createRoot, } = this.props; const mobiledoc = this.props.mobiledoc || (html ? undefined : EMPTY_MOBILEDOC); @@ -40,7 +40,7 @@ class Container extends React.Component { ...this.props.options, atoms, autofocus, - cardOptions: { cardProps, ReactDOM }, + cardOptions: { cardProps, createRoot }, cards, html, mobiledoc, @@ -88,7 +88,7 @@ class Container extends React.Component { spellcheck, willCreateEditor, onChange, - ReactDOM, + createRoot, ...componentProps } = this.props; /* eslint-enable no-unused-vars */ diff --git a/src/utils/classToAtom.js b/src/utils/classToAtom.js index e9781bc..ca6112d 100644 --- a/src/utils/classToAtom.js +++ b/src/utils/classToAtom.js @@ -5,7 +5,7 @@ const atomRenderer = (component) => ({ env, options, payload, value }) => { const { onTeardown } = env; - const { ReactDOM } = options; + const { createRoot } = options; const element = React.createElement(component, { ...env, @@ -15,9 +15,9 @@ const atomRenderer = }); const targetNode = document.createElement('span'); - const root = reactDomRender(ReactDOM, element, targetNode); + const root = reactDomRender(createRoot, element, targetNode); - onTeardown(() => reactDomUnmount(ReactDOM, root, targetNode)); + onTeardown(() => reactDomUnmount(root, targetNode)); return targetNode; }; diff --git a/src/utils/classToCard.js b/src/utils/classToCard.js index 392d3ae..b46ac3d 100644 --- a/src/utils/classToCard.js +++ b/src/utils/classToCard.js @@ -6,7 +6,7 @@ const cardRenderer = ({ env, options, payload }) => { const targetNode = document.createElement('div'); const { didRender, onTeardown } = env; - const { cardProps, ReactDOM } = options; + const { cardProps, createRoot } = options; let root; didRender(() => { @@ -17,10 +17,10 @@ const cardRenderer = payload, isEditing, }); - root = reactDomRender(ReactDOM, element, targetNode); + root = reactDomRender(createRoot, element, targetNode); }); - onTeardown(() => reactDomUnmount(ReactDOM, root, targetNode)); + onTeardown(() => reactDomUnmount(root, targetNode)); return targetNode; }; diff --git a/src/utils/react.js b/src/utils/react.js index fd5af8d..6d13ebc 100644 --- a/src/utils/react.js +++ b/src/utils/react.js @@ -1,18 +1,17 @@ import ReactDOM from 'react-dom'; -export function reactDomRender(CustomReactDOM, element, target) { - const ResolvedReactDOM = CustomReactDOM || ReactDOM; - const createRoot = ResolvedReactDOM.createRoot; // React 18+ +export function reactDomRender(createRoot, element, target) { + // React 18+ if (createRoot) { const root = createRoot(target); root.render(element); return root; } else { - ResolvedReactDOM.render(element, target); + ReactDOM.render(element, target); } } -export function reactDomUnmount(CustomReactDOM, root, target) { +export function reactDomUnmount(root, target) { if (root) root.unmount(); - else (CustomReactDOM || ReactDOM).unmountComponentAtNode(target); + else ReactDOM.unmountComponentAtNode(target); }