11# React Easy Modals
2+
23[ ![ bundle size] ( https://img.shields.io/bundlephobia/minzip/react-easy-modals )] ( https://bundlephobia.com/result?p=react-easy-modals )
34
4- A simple, flexible, zero-dependency modal manager for React (port of [ svelte-modals] ( https://github.com/mattjennings/svelte-modals ) ).
5+ A simple, flexible, zero-dependency, type-safe modal manager for React (port of [ svelte-modals] ( https://github.com/mattjennings/svelte-modals ) ).
56
67[ 📚 Documentation] ( https://react-easy-modals-docs.vercel.app/ )
78
@@ -18,30 +19,21 @@ npm install react-easy-modals
1819Wrap your app with ` ModalProvider ` to enable modals:
1920
2021``` tsx
21- import { ModalProvider } from ' react-easy-modals'
22+ import { ModalProvider } from " react-easy-modals" ;
2223
2324function App() {
24- return (
25- <ModalProvider >
26- { /* Your app content */ }
27- </ModalProvider >
28- )
25+ return <ModalProvider >{ /* Your app content */ } </ModalProvider >;
2926}
3027
31- export default App
28+ export default App ;
3229```
3330
3431### Create your Modal component
3532
3633Create a basic modal component:
3734
3835``` tsx
39- function Modal({
40- title ,
41- message ,
42- close ,
43- isOpen ,
44- }) {
36+ function Modal({ title , message , close , isOpen }) {
4537 if (! isOpen ) return null ;
4638
4739 return (
@@ -87,23 +79,19 @@ function Modal({
8779Import ` useModals ` anywhere in your app to open or close your modals:
8880
8981``` tsx
90- import { useModals } from ' react-easy-modals'
91- import Modal from ' ./Modal'
82+ import { useModals } from " react-easy-modals" ;
83+ import Modal from " ./Modal" ;
9284
9385function Page() {
94- const modals = useModals ()
86+ const modals = useModals ();
9587
9688 const handleClick = () => {
97- modals .open (Modal , {
98- title: " Alert" ,
99- message: " This is an alert"
100- })
101- }
89+ modals .open (Modal , {
90+ title: " Alert" ,
91+ message: " This is an alert" ,
92+ });
93+ };
10294
103- return (
104- <button onClick = { handleClick } >
105- Open Modal
106- </button >
107- )
95+ return <button onClick = { handleClick } >Open Modal</button >;
10896}
10997```
0 commit comments