diff --git a/README.md b/README.md index 6df7b2f..07eba22 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,61 @@ So I decided to create this package that would solve all these problems at once. I was inspired by packages like [react-toastify](https://npmjs.com/package/react-toastify) and [react-modal](https://npmjs.com/package/react-modal). +## Quick Peek + +**`Usage.tsx`** +```tsx +function Usage() { + return
Modal.open(ModalComponent)} /> +} +``` + +**`modal.ts`** +```tsx +import { ModalController } from "react-modal-global" + +export const Modal = new ModalController +``` + +**`main.ts`** +```tsx +import "react-modal-global/styles/modal.scss" + +import React from "react" +import ReactDOM from "react-dom" +import { ModalContainer } from "react-modal-global" + +import Modal from "./Modal" // Your modal. + +function App() { + return ( + <> + + {/* ... Other components ... */} + {/* It's better if `ModalContainer` goes after all other components */} + + + ) +} + +ReactDOM.render(, document.getElementById("root")) +``` +**`ModalComponent.tsx`** +```tsx +function ModalComponent() { + const modal = useModalWindow() // Getting modal context of a modal window related to this component. + + return ( + <> +

Title

+

Content text

+ + + + ) +} +``` + ## Playgrounds | Title | Playground | | --- | --- |