You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+30-2
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,38 @@
1
1
2
-
React Stack Modal(WIP)
2
+
React Stack Modal
3
3
----
4
4
5
5
Demo http://ui.talk.ai/react-stack-modal
6
6
7
-
`autoFocus: true` may break entering transition, add requestAnimation frame to by pass.
7
+
### Design Purpose
8
+
9
+
Ideas behind this component: [New modal built for React called react-stack-modal](https://hashnode.com/post/new-modal-built-for-react-called-react-stack-modal-cik1bmmif00054c53wtyxlk9u)
10
+
11
+
State of modals and popovers are managed inside the store, so Controller will have full access to modals and it makes sophisticated logics possible. And the cost is we need quite some boilerplate code.
12
+
13
+
### Usage
14
+
15
+
This component is based on [`actions-recorder`](https://github.com/jianliaoim/actions-recorder).
16
+
17
+
```bash
18
+
npm i --save react-stack-modal
19
+
```
20
+
21
+
Steps to use this modal:
22
+
23
+
* Setup `actions-recorder`
24
+
* Setup `modalStack: []` in store as the default modal list
25
+
* Connect actions `modal/add modal/remove modal/content-click` to `updater/modal.coffee`
26
+
* Mount `ModalStack` in component tree and wire up events
27
+
* Pick what you need in `main.css` and add in your project
28
+
29
+
Browse [`app/`][app] folder for details. Well this is a library designed for heavy use of modals and popovers. It may be over complicated.
0 commit comments