Merge pull request #11 from mbrookson/feature/portal-refactor

v1 Portal refactor

Author: mbrookson

README.md

@@ -30,10 +30,15 @@ yarn add react-simple-hook-modal
   - Modals are rendered after allthe children in side `<ModalProvider/>`
 - Use the `useModal` hook to control your modal's state
 - Use the `ModalTransition` enum to optionally set the transition animation
-  - Currently there are 3 to select from, or choose NONE to disable the transitions
+  - Currently there are 3 to select from, or choose `NONE` to disable the transitions
 
-```
-import { ModalProvider, Modal, useModal, ModalTransition } from 'react-simple-hook-modal';
+```tsx
+import {
+  ModalProvider,
+  Modal,
+  useModal,
+  ModalTransition,
+} from 'react-simple-hook-modal';
 
 const MyComponent = () => {
   const { isModalOpen, openModal, closeModal } = useModal();
@@ -43,34 +48,33 @@ const MyComponent = () => {
       <button onClick={openModal}>Open</button>
       <Modal
         id="any-unique-identifier"
-        content={(
-          // Any React node can be used as content
-          <button onClick={openModal}>Open</button>
-        )}
         isOpen={isModalOpen}
         transition={ModalTransition.BOTTOM_UP}
-      />
+      >
+        <button onClick={openModal}>Open</button>
+      </Modal>
     </>
   );
-}
+};
 
 const App = () => (
   <ModalProvider>
     <MyComponent />
   </ModalProvider>
-)
-
+);
 ```
 
 ## Styles
 
 `react-simple-hook-modal` uses a subset of [tailwindcss][tailwind] under the hood. The tailwind classes used have a prefix of `rsm` added to avoid potential conflicts with your own styles. You can import the default styles using:
 
-```
+```css
 import 'react-simple-hook-modal/dist/styles.css';
 ```
 
-`ModalProvider` also takes an optional `backdropClassName` which can contain one or more classes to append and override the default styles (e.g. Changing the backdrop colour can be done by adding the class `bg-blue-800`).
+`ModalProvider` also takes optional props:
+
+- `backdropClassName` which can contain one or more classes to append and override the default styles (e.g. Changing the backdrop colour can be done by adding the class `bg-blue-800`).
 
 # Example
 
@@ -84,7 +88,7 @@ See the `example` directory in the repository for a full example including multi
 
 If you have any issues, please create an issue here on GitHub.
 
-### Thanks!
+### Thanks and enjoy!
 
 [publish]: https://github.com/mbrookson/react-simple-hook-modal/workflows/Publish%20CI/badge.svg?branch=master
 [ci]: https://github.com/mbrookson/react-simple-hook-modal/workflows/CI/badge.svg?branch=master

example/package-lock.json

@@ -10,15 +10,15 @@
   },
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^2.1.2",
-    "components": "^0.1.0",
     "autoprefixer": "^9.7.6",
+    "components": "^0.1.0",
     "cssnano": "^4.1.10",
     "parcel-bundler": "^1.12.4",
     "postcss-cli": "^7.1.0",
-    "tailwindcss": "^1.3.5",
-    "typescript": "^3.4.5",
     "react-app-polyfill": "^1.0.0",
-    "react-icons-kit": "^1.3.1"
+    "react-icons-kit": "^1.3.1",
+    "tailwindcss": "^1.4.6",
+    "typescript": "^3.9.6"
   },
   "alias": {
     "react": "../node_modules/react",
@@ -29,4 +29,4 @@
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.8.4"
   }
-}
+}

example/package.json

@@ -16,11 +16,12 @@ const ModalContent = ({ transition, onCloseClicked }) => {
       </button>
       <Modal
         id="2"
-        content={<p>This modal can be closed by clicking the backdrop.</p>}
         isOpen={isModalOpen}
         onBackdropClick={closeModal}
         transition={transition}
-      />
+      >
+        <p>This modal can be closed by clicking the backdrop.</p>
+      </Modal>
       <div className="mt-8">
         Open another modal which will appear stacked on top of the current
         modal.
@@ -67,14 +68,9 @@ export const Example = ({ transition }) => {
       >
         Open modal
       </button>
-      <Modal
-        id="1"
-        content={
-          <ModalContent transition={transition} onCloseClicked={closeModal} />
-        }
-        isOpen={isModalOpen}
-        transition={transition}
-      />
+      <Modal id="1" isOpen={isModalOpen} transition={transition}>
+        <ModalContent transition={transition} onCloseClicked={closeModal} />
+      </Modal>
     </div>
   );
 };

example/src/Example.tsx

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "license": "MIT",
   "name": "react-simple-hook-modal",
   "description": "A simple React modal with hook based API",
@@ -52,10 +52,10 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rollup-plugin-postcss": "^2.8.2",
-    "tailwindcss": "^1.3.5",
+    "tailwindcss": "^1.4.6",
     "tsdx": "^0.13.2",
     "tslib": "^1.11.1",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.6"
   },
   "keywords": [
     "react",
@@ -65,6 +65,7 @@
     "simple"
   ],
   "dependencies": {
+    "hooks": "^0.3.2",
     "react-spring": "^8.0.27"
   }
 }

package-lock.json

@@ -1,8 +1,9 @@
 import React from 'react';
 
 export interface Context {
+  addOrUpdate(id: string): void;
   remove(id: string): void;
-  addOrUpdate(modal: React.ReactNode): void;
+  getStaggerPixels(id: string): number;
 }
 
 export const ModalContext = React.createContext({} as Context);