Skip to content

Commit 8f92f59

Browse files
committed
Update readme
1 parent bb0e744 commit 8f92f59

1 file changed

Lines changed: 15 additions & 27 deletions

File tree

README.md

Lines changed: 15 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
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
1819
Wrap 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

2324
function 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

3633
Create 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({
8779
Import `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

9385
function 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

Comments
 (0)