Skip to content

jianliaoim/react-stack-modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Stack Modal

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

Design Purpose

Ideas behind this component: New modal built for React called react-stack-modal

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.

Usage

This component is based on actions-recorder.

npm i --save react-stack-modal

Steps to use this modal:

  • Setup actions-recorder
  • Setup modalStack: [] in store as the default modal list
  • Connect actions modal/add modal/remove modal/content-click to updater/modal.coffee
  • Mount ModalStack in component tree and wire up events
  • Pick what you need in main.css and add in your project

Browse app/ folder for details. Well this is a library designed for heavy use of modals and popovers. It may be over complicated.

Troubleshooting

  • autoFocus: true may break entering transition, add requestAnimationFrame to bypass.

Develop

Project template:

https://github.com/teambition/coffee-webpack-starter

License

MIT

About

A stack manager of modal, according to uni-directional dataflow

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published