React-Boxer
React-Boxer supports a way to add(and remove) components flexiblely, this is pretty usefule for flexible projects.
You will use this if your project has float login panel
, changed ads
, popup dialogs
and so on.
Install
npm install react-boxer --save-dev
Usage : Float Login Panel
Let's show a float login panel use case.
Float login panel will appear anywhere,anytime for an unlogin user, so it's hard to decide where to put it, and when to mount it.
- First, we define a
Login Component
, with remove function.
Login.js
// remove login panel { Boxer } { return <div> <h5>Login</h5> <form> <div><input type='text' placeHolder= thispropsdefaultName ||'Username' /></div> <div><input type='password' placeHolder='Password'/></div> </form> <div> <button onClick= remove >Cancel</button> <button>Login</button> </div> </div> }
- Second, we add a container to React (use
Box
)
App.js
// other import { return <HashRouter> <div className='page-group'> <Route index path='/' component= Home /> <Route path='/user' component= User /> <Box index='1'/> </div> </HashRouter> }
- Now, you can add Login Component anywhere, anytime.
User.js
// add login panel { Boxer } { return <div> <button onClick= thislogin >Login</button> </div> }
Github
https://github.com/vifird/react-boxer
Contributors
git clone git@github.com:vifird/react-boxer.git
cd react-boxer
npm install