feat(createPortal): extend functionality with createPortal

iamhosseindhv · Oct 31, 2019 · e181c3e · e181c3e
1 parent 73ecdf9
commit e181c3e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 22 deletions.
diff --git a/src/SnackbarProvider.js b/src/SnackbarProvider.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import Slide from '@material-ui/core/Slide';
 import SnackbarContext from './SnackbarContext';
@@ -181,7 +182,7 @@ class SnackbarProvider extends Component {
     };
 
     render() {
-        const { classes, children, maxSnack, dense, ...props } = this.props;
+        const { classes, children, maxSnack, dense, domNode, ...props } = this.props;
         const { contextValue } = this.state;
 
         const categ = this.state.snacks.reduce((acc, current) => {
@@ -194,31 +195,32 @@ class SnackbarProvider extends Component {
         }, {});
 
         const iconVariant = Object.assign({ ...defaultIconVariant }, { ...this.props.iconVariant });
+        const notistackElements = Object.entries(categ).map(([origin, snacks]) => (
+            <SnackbarContainer
+                key={origin}
+                dense={dense}
+                anchorOrigin={snacks[0].anchorOrigin}
+                className={classes[`containerAnchorOrigin${origin}`]}
+            >
+                {snacks.map(snack => (
+                    <SnackbarItem
+                        {...props}
+                        key={snack.key}
+                        dense={dense}
+                        snack={snack}
+                        iconVariant={iconVariant}
+                        classes={getClasses(classes)}
+                        onClose={this.handleCloseSnack}
+                        onExited={this.handleExitedSnack}
+                    />
+                ))}
+            </SnackbarContainer>
+        ));
 
         return (
             <SnackbarContext.Provider value={contextValue}>
                 {children}
-                {Object.entries(categ).map(([origin, snacks]) => (
-                    <SnackbarContainer
-                        key={origin}
-                        dense={dense}
-                        anchorOrigin={snacks[0].anchorOrigin}
-                        className={classes[`containerAnchorOrigin${origin}`]}
-                    >
-                        {snacks.map(snack => (
-                            <SnackbarItem
-                                {...props}
-                                key={snack.key}
-                                dense={dense}
-                                snack={snack}
-                                iconVariant={iconVariant}
-                                classes={getClasses(classes)}
-                                onClose={this.handleCloseSnack}
-                                onExited={this.handleExitedSnack}
-                            />
-                        ))}
-                    </SnackbarContainer>
-                ))}
+                {domNode ? createPortal(notistackElements, domNode) : notistackElements}
             </SnackbarContext.Provider>
         );
     }
@@ -348,6 +350,10 @@ SnackbarProvider.propTypes = {
         PropTypes.number,
         PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
     ]),
+    /**
+     * Valid and exist HTML Node element, used to target `React.createPortal`
+     */
+    domNode: PropTypes.instanceOf(Element),
 };
 
 SnackbarProvider.defaultProps = {

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -47,6 +47,7 @@ export interface SnackbarProviderProps extends Omit<SnackbarProps, 'open' | 'mes
     preventDuplicate?: boolean;
     dense?: boolean;
     action?: SnackbarContentProps['action'] | ((key: OptionsObject['key']) => React.ReactNode);
+    domNode: HTMLElement;
 }
 
 export const SnackbarProvider: React.ComponentType<SnackbarProviderProps>;