react-modal-port 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/readme.md +12 -5
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -5,7 +5,18 @@ This small but neat package allows you to:
|
|
|
5
5
|
* Launch modals flexibly from anywhere in your React app.
|
|
6
6
|
* Have them render at one specific place in your DOM.
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
**Demo:** https://codepen.io/oliverwehn/pen/YzMyoBr
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
- [Installation](#-installation)
|
|
12
|
+
- [Components](#-components)
|
|
13
|
+
- [ModalContextProvider](#modalcontextprovider)
|
|
14
|
+
- [ModalPort](#modalport)
|
|
15
|
+
- [Launching Modals](#-launching-modals)
|
|
16
|
+
- [Stacking Modals And Handling Modal State](#-stacking-modals-and-handling-modal-state)
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## 🏁 Installation
|
|
9
20
|
|
|
10
21
|
```bash
|
|
11
22
|
$ npm install react-modal-port
|
|
@@ -25,7 +36,6 @@ Besides `children` a prop `onBackdropClick` is passed to `render`. It holds, if
|
|
|
25
36
|
|
|
26
37
|
|
|
27
38
|
```tsx
|
|
28
|
-
import React from 'react';
|
|
29
39
|
import { ModalContextProvider } from 'react-modal-port';
|
|
30
40
|
|
|
31
41
|
// Backdrop component to be passed to the `ModalPort`’s `render` prop
|
|
@@ -67,7 +77,6 @@ export default RootLayout;
|
|
|
67
77
|
Launching modals makes use of the `useModal` hook that provides you with the `launchModal` function.
|
|
68
78
|
|
|
69
79
|
```tsx
|
|
70
|
-
import React from 'react';
|
|
71
80
|
import { useModal } from 'react-modal-port';
|
|
72
81
|
import DecisionModal from './modals/decision';
|
|
73
82
|
|
|
@@ -122,7 +131,6 @@ The `launchModal` function expects the following arguments:
|
|
|
122
131
|
Modals can be created and designed to fully fit your needs. The only requirement is to define the functions to resolve them, for example, when clicking a button. The modal component for the example above could look like this:
|
|
123
132
|
|
|
124
133
|
```tsx
|
|
125
|
-
import React from 'react';
|
|
126
134
|
|
|
127
135
|
type DecisionModalProps = {
|
|
128
136
|
decideYay: () => void;
|
|
@@ -184,7 +192,6 @@ It then could cater the following modal functionality:
|
|
|
184
192
|
|
|
185
193
|
|
|
186
194
|
```tsx
|
|
187
|
-
import React from 'react';
|
|
188
195
|
|
|
189
196
|
type DecisionModalProps = {
|
|
190
197
|
decideYay: () => void;
|