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);
}