Skip to content

Commit 8c778c7

Browse files
committed
better explanation for the component
1 parent 2e3b0e8 commit 8c778c7

File tree

1 file changed

+30
-2
lines changed

1 file changed

+30
-2
lines changed

README.md

+30-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,38 @@
11

2-
React Stack Modal(WIP)
2+
React Stack Modal
33
----
44

55
Demo http://ui.talk.ai/react-stack-modal
66

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.
30+
31+
[app]: https://github.com/jianliaoim/react-stack-modal/tree/master/app
32+
33+
### Troubleshooting
34+
35+
* `autoFocus: true` may break entering transition, add `requestAnimationFrame` to bypass.
836

937
### Develop
1038

0 commit comments

Comments
 (0)