ModalConfig→ModalProvider (#55)

Author: dc7290

README.md

@@ -105,12 +105,12 @@ useModal('root', {
 
 ## Global Settings
 
-The `ModalConfig` component allows you to apply a common default configuration to all `useModal` hooks.
+The `ModalProvider` component allows you to apply a common default configuration to all `useModal` hooks.
 
 ```jsx
-<ModalConfig value={options}>
+<ModalProvider value={options}>
   <Component />
-</ModalConfig>
+</ModalProvider>
 ```
 
 The following example sets all `useModal` hooks to not scroll outside the modal by default.
@@ -135,14 +135,14 @@ const Component2 = () => {
 
 const App = () => {
   return (
-    <ModalConfig
+    <ModalProvider
       value={{
         preventScroll: true,
       }}
     >
       <Component1 />
       <Component2 />
-    </ModalConfig>
+    </ModalProvider>
   );
 };
 ```

examples-routes.js

@@ -6,5 +6,5 @@ module.exports = [
     path: '/close-button/render-option',
     title: 'useModal with renderCloseButton option example',
   },
-  { path: '/modal-config', title: 'useModal with ModalConfig example' },
+  { path: '/modal-provider', title: 'useModal with ModalProvider example' },
 ];

examples/src/index.tsx

@@ -6,7 +6,7 @@ import routes from '../../examples-routes';
 import { Modal as CommonModal } from './js';
 import { Modal as CloseButtonModal } from './js/close-button';
 import { Modal as CloseButtonWithRenderOptionModal } from './js/close-button/render-option';
-import { ModalWrapper as ModalConfigModal } from './js/modal-config';
+import { ModalWrapper as ModalProviderModal } from './js/modal-config';
 import { Modal as PreventScrollModal } from './js/prevent-scroll';
 
 const CurrentModal = () => {
@@ -24,8 +24,8 @@ const CurrentModal = () => {
     case '/close-button/render-option': {
       return <CloseButtonWithRenderOptionModal />;
     }
-    case '/modal-config': {
-      return <ModalConfigModal />;
+    case '/modal-provider': {
+      return <ModalProviderModal />;
     }
     default: {
       return <CommonModal />;

examples/src/js/modal-config/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ModalConfig, useModal } from '../../../../src';
+import { ModalProvider, useModal } from '../../../../src';
 
 const modalStyle: React.CSSProperties = {
   backgroundColor: '#fff',
@@ -48,7 +48,7 @@ const ModalWithOverrideOptions = () => {
 
 export const ModalWrapper = () => {
   return (
-    <ModalConfig
+    <ModalProvider
       value={{
         focusTrapOptions: {
           clickOutsideDeactivates: true,
@@ -57,6 +57,6 @@ export const ModalWrapper = () => {
     >
       <Modal />
       <ModalWithOverrideOptions />
-    </ModalConfig>
+    </ModalProvider>
   );
 };

src/components/ModalConfig.tsx renamed to src/components/ModalProvider.tsx

@@ -2,11 +2,11 @@ import React, { PropsWithChildren } from 'react';
 import { ModalOptions } from '..';
 import { ModalConfigContext } from '../hooks/useModalConfig';
 
-interface ModalConfigProps {
+interface ModalProviderProps {
   value: ModalOptions;
 }
 
-export const ModalConfig: React.FC<PropsWithChildren<ModalConfigProps>> = ({
+export const ModalProvider: React.FC<PropsWithChildren<ModalProviderProps>> = ({
   value,
   children,
 }) => {

src/index.tsx

@@ -76,4 +76,4 @@ export const useModal: UseModal = (elementId = 'root', options = {}) => {
   return [ModalWrapper, open, close, isOpen];
 };
 
-export { ModalConfig } from './components/ModalConfig';
+export { ModalProvider } from './components/ModalProvider';