Support for React 18 (#65)

* #64 Support for React 18

* #64 updated version

* #64 updated readme

Author: Quernest

README.md

@@ -17,24 +17,24 @@ npm install mui-modal-provider # or yarn add mui-modal-provider
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ModalProvider, { useModal } from 'mui-modal-provider';
 import Dialog, { DialogProps } from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import Button from '@mui/material/Button';
 
-type Props = DialogProps & {
+interface SimpleDialogProps extends DialogProps {
   title: string,
 };
 
-// ✔️ create the dialog you want to use
-const SimpleDialog: React.FC<Props> = ({ title, ...props }) => (
+// Create the dialog you want to use
+const SimpleDialog: React.FC<SimpleDialogProps> = ({ title, ...props }) => (
   <Dialog {...props}>
     <DialogTitle>{title}</DialogTitle>
   </Dialog>
 );
 
-// ✔️ use modal hook and show the dialog
+// Use modal hook and show the dialog
 const App = () => {
   const { showModal } = useModal();
 
@@ -49,12 +49,14 @@ const App = () => {
   );
 };
 
-// ✔️ wrap the app with modal provider
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+// Wrap the app with modal provider
+root.render(
   <ModalProvider>
     <App />
-  </ModalProvider>,
-  document.getElementById('root')
+  </ModalProvider>
 );
 ```
 

coverage/coverage-final.json

@@ -8,20 +8,21 @@
     "build": "parcel build ./src/index.html"
   },
   "dependencies": {
-    "@emotion/react": "^11.7.0",
-    "@emotion/styled": "^11.6.0",
-    "@mui/material": "^5.2.3",
-    "react-app-polyfill": "^1.0.0"
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@mui/material": "^5.9.3",
+    "react-app-polyfill": "^3.0.0"
   },
   "alias": {
     "react": "../node_modules/react",
-    "react-dom": "../node_modules/react-dom/profiling",
+    "react-dom": "../node_modules/react-dom",
+    "react-dom/client": "../node_modules/react-dom/client",
     "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
   },
   "devDependencies": {
-    "@types/react": "^17.0.6",
-    "@types/react-dom": "^17.0.5",
-    "parcel": "^2.0.0-beta.2",
-    "typescript": "^3.4.5"
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "parcel": "^2.7.0",
+    "typescript": "^4.7.4"
   }
 }

example/package.json

@@ -6,14 +6,14 @@ import DialogContentText from '@mui/material/DialogContentText';
 import Dialog, { DialogProps } from '@mui/material/Dialog';
 import Button from '@mui/material/Button';
 
-type Props = DialogProps & {
+export interface ConfirmationDialogProps extends DialogProps {
   title: string;
   description: string;
   onCancel: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   onConfirm: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 
-const ConfirmationDialog: React.FC<Props> = ({
+const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
   title,
   description,
   onCancel,

example/src/components/dialogs/confirmation-dialog.tsx

@@ -6,12 +6,11 @@ import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { useModal } from '../../../../src';
 
-type Props = DialogProps & {
-  // nesting level
+export interface NestedDialogProps extends DialogProps {
   deep: number;
 };
 
-const NestedDialog: React.FC<Props> = ({ deep = 0, ...props }) => {
+const NestedDialog: React.FC<NestedDialogProps> = ({ deep = 0, ...props }) => {
   const { showModal } = useModal();
 
   const handleClick = () => {

example/src/components/dialogs/nested-dialog.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Modal, { ModalProps } from '@mui/material/Modal';
+import { SxProps, Theme } from '@mui/material/styles';
 
-const style = {
+const style: SxProps<Theme> = {
   position: 'absolute',
   width: 400,
   top: '50%',
@@ -13,9 +14,9 @@ const style = {
   p: 4,
 };
 
-type Props = Omit<ModalProps, 'children'> & {};
+export interface SimpleModalProps extends Omit<ModalProps, 'children'> {};
 
-const SimpleModal: React.FC<Props> = props => (
+const SimpleModal: React.FC<SimpleModalProps> = props => (
   <Modal {...props}>
     <Box sx={style}>
       <h2>Simple Modal</h2>

example/src/components/modals/simple-modal.tsx

@@ -5,8 +5,9 @@ import Fade from '@mui/material/Fade';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { TransitionProps } from '@mui/material/transitions';
+import { SxProps, Theme } from '@mui/material/styles';
 
-const style = {
+const style: SxProps<Theme> = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -18,11 +19,11 @@ const style = {
   p: 4,
 };
 
-type Props = Omit<ModalProps, 'children'> & {
+export interface TransitionsModalProps extends Omit<ModalProps, 'children'> {
   TransitionProps: TransitionProps;
 };
 
-export default function TransitionsModal({ open, ...props }: Props) {
+export default function TransitionsModal({ open, ...props }: TransitionsModalProps) {
   /**
    * 💡 if you are using material-ui before version 5,
    * then you should use `onExited` (and other methods) directly from props.

example/src/components/modals/transition-modal.tsx

@@ -9,6 +9,6 @@
 
   <body>
     <div id="root"></div>
-    <script src="./index.tsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>

example/src/index.html

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import {
   StyledEngineProvider,
   ThemeProvider,
@@ -10,14 +10,18 @@ import ModalProvider from '../../src';
 import App from './app';
 
 const theme = createTheme();
+const container = document.getElementById('root');
 
-ReactDOM.render(
-  <StyledEngineProvider injectFirst>
-    <ThemeProvider theme={theme}>
-      <ModalProvider>
-        <App />
-      </ModalProvider>
-    </ThemeProvider>
-  </StyledEngineProvider>,
-  document.getElementById('root')
-);
+if (container) {
+  const root = ReactDOM.createRoot(container);
+
+  root.render(
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <ModalProvider>
+          <App />
+        </ModalProvider>
+      </ThemeProvider>
+    </StyledEngineProvider>
+  );
+}