Rename container to rootComponent

src/ModalProvider.tsx

@@ -7,9 +7,9 @@ import { ModalRoot } from "./ModalRoot";
  */
 export interface ModalProviderProps {
   /**
-   * Container component for modals that will be passed to ModalRoot
+   * Container component for modal nodes
    */
-  container?: React.ComponentType<any>;
+  rootComponent?: React.ComponentType<any>;
 
   /**
    * Subtree that will receive modal context
@@ -22,7 +22,10 @@ export interface ModalProviderProps {
  *
  * Provides modal context and renders ModalRoot.
  */
-export const ModalProvider = ({ container, children }: ModalProviderProps) => {
+export const ModalProvider = ({
+  rootComponent,
+  children
+}: ModalProviderProps) => {
   const [modals, setModals] = useState<Record<string, ModalType>>({});
   const showModal = useCallback(
     (key: string, modal: ModalType) =>
@@ -47,7 +50,7 @@ export const ModalProvider = ({ container, children }: ModalProviderProps) => {
     <ModalContext.Provider value={contextValue}>
       <React.Fragment>
         {children}
-        <ModalRoot modals={modals} container={container} />
+        <ModalRoot modals={modals} component={rootComponent} />
       </React.Fragment>
     </ModalContext.Provider>
   );

src/ModalRoot.tsx

@@ -18,7 +18,7 @@ interface ModalRootProps {
    * used by defualt, specifying a different component can change the way modals
    * are rendered across the whole application.
    */
-  container?: React.ComponentType<any>;
+  component?: React.ComponentType<any>;
 }
 
 /**
@@ -48,19 +48,19 @@ const ModalRenderer = memo(({ component, ...rest }: ModalRendererProps) =>
  * Renders modals using react portal.
  */
 export const ModalRoot = memo(
-  ({ modals, container: Container = React.Fragment }: ModalRootProps) => {
+  ({ modals, component: RootComponent = React.Fragment }: ModalRootProps) => {
     const [mountNode, setMountNode] = useState<Element | undefined>(undefined);
 
     // This effect will not be ran in the server environment
     useEffect(() => setMountNode(document.body));
 
     return mountNode
       ? ReactDOM.createPortal(
-          <Container>
+          <RootComponent>
             {Object.keys(modals).map(key => (
               <ModalRenderer key={key} component={modals[key]} />
             ))}
-          </Container>,
+          </RootComponent>,
           document.body
         )
       : null;

src/__tests__/ModalProvider.tsx

@@ -4,8 +4,8 @@ import { ModalProvider, useModal } from "..";
 import "jest-dom/extend-expect";
 
 describe("custom container prop", () => {
-  const Container: React.SFC = ({ children }) => (
-    <div data-testid="custom-container">{children}</div>
+  const RootComponent: React.SFC = ({ children }) => (
+    <div data-testid="custom-root">{children}</div>
   );
 
   const App = () => {
@@ -14,17 +14,17 @@ describe("custom container prop", () => {
     return <button onClick={showModal}>Show modal</button>;
   };
 
-  it("should render modals inside custom container", () => {
+  it("should render modals inside custom root component", () => {
     const { getByTestId, getByText } = render(
-      <ModalProvider container={Container}>
+      <ModalProvider rootComponent={RootComponent}>
         <App />
       </ModalProvider>
     );
 
     fireEvent.click(getByText("Show modal"));
     flushEffects();
 
-    expect(getByTestId("custom-container")).toContainElement(
+    expect(getByTestId("custom-root")).toContainElement(
       getByText("This is a modal")
     );
   });