Updated demos to React 18

docs/.vuepress/handsontable-manager/dependencies.js

@@ -81,8 +81,8 @@ const buildDependencyGetter = (version) => {
  fixer,
  helpers,
  hot: [getPackageUrls('handsontable', version, 'js'), ['Handsontable'], getPackageUrls('handsontable', version, 'css')],
- react: ['https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js', ['React']],
- 'react-dom': ['https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js', ['ReactDOM']],
+ react: ['https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js', ['React']],
+ 'react-dom': ['https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js', ['ReactDOM']],
  'hot-react': [getPackageUrls('@handsontable/react', version, 'js'), ['Handsontable.react']],
  'react-redux': ['https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.4/react-redux.min.js'],
  'react-colorful': ['https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js'],

docs/.vuepress/public/scripts/fixer.js

@@ -89,7 +89,7 @@
  } else if (key === 'hyperformula') {
  ns = 'HyperFormula';
 
- } else if (key === 'react-dom') {
+ } else if (key === 'react-dom/client') {
  ns = 'ReactDOM';
 
  } else if (key === 'react-colorful') {

docs/content/guides/accessories-and-menus/context-menu.md

@@ -99,7 +99,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
+const container = document.getElementById('example1');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -218,7 +221,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));
+const container = document.getElementById('example2');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -283,7 +289,10 @@ export const ExampleComponent = () => {
 }
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example4'));
+const container = document.getElementById('example4');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -503,7 +512,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));
+const container = document.getElementById('example3');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 

docs/content/guides/accessories-and-menus/export-to-csv.md

@@ -153,7 +153,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
+const container = document.getElementById('example1');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -293,7 +296,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));
+const container = document.getElementById('example2');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -430,7 +436,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));
+const container = document.getElementById('example3');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 

docs/content/guides/accessories-and-menus/undo-redo.md

@@ -111,7 +111,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example'));
+const container = document.getElementById('example');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 

docs/content/guides/cell-features/autofill-values.md

@@ -102,7 +102,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
+const container = document.getElementById('example1');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -191,7 +194,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));
+const container = document.getElementById('example2');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 

docs/content/guides/cell-features/clipboard.md

@@ -117,7 +117,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
+const container = document.getElementById('example1');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -286,7 +289,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));
+const container = document.getElementById('example3');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -403,7 +409,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));
+const container = document.getElementById('example2');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 

docs/content/guides/cell-features/comments.md

@@ -166,7 +166,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
+const container = document.getElementById('example1');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -251,7 +254,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));
+const container = document.getElementById('example2');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -338,7 +344,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));
+const container = document.getElementById('example3');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -427,7 +436,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example4'));
+const container = document.getElementById('example4');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 

docs/content/guides/cell-features/conditional-formatting.md

@@ -212,7 +212,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
+const container = document.getElementById('example1');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 

docs/content/guides/cell-features/disabled-cells.md

@@ -203,7 +203,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
+const container = document.getElementById('example1');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -306,7 +309,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));
+const container = document.getElementById('example2');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -417,7 +423,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));
+const container = document.getElementById('example3');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -526,7 +535,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example4'));
+const container = document.getElementById('example4');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 

docs/content/guides/cell-features/formatting-cells.md

@@ -131,7 +131,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
+const container = document.getElementById('example1');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -239,7 +242,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));
+const container = document.getElementById('example2');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -404,7 +410,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));
+const container = document.getElementById('example3');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 

docs/content/guides/cell-features/merge-cells.md

@@ -124,7 +124,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
+const container = document.getElementById('example1');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 

docs/content/guides/cell-features/selection.md

@@ -171,7 +171,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
+const container = document.getElementById('example1');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -321,7 +324,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));
+const container = document.getElementById('example2');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 
@@ -497,7 +503,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));
+const container = document.getElementById('example3');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```
 

docs/content/guides/cell-features/text-alignment.md

@@ -147,7 +147,10 @@ export const ExampleComponent = () => {
 };
 
 /* start:skip-in-preview */
-ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
+const container = document.getElementById('example1');
+const root = ReactDOM.createRoot(container);
+
+root.render(<ExampleComponent />);
 /* end:skip-in-preview */
 ```