https://github.com/kimmelsg/cj-react-active
Handle open / closed state by listening to global events
https://github.com/kimmelsg/cj-react-active
Last synced: 2 months ago
JSON representation
Handle open / closed state by listening to global events
- Host: GitHub
- URL: https://github.com/kimmelsg/cj-react-active
- Owner: kimmelsg
- Created: 2016-09-13T21:16:30.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-10-03T23:32:22.000Z (over 8 years ago)
- Last Synced: 2025-02-26T05:05:44.689Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 7
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
##react-active
```
npm install react-active
```
###What is this
react-active lets you handle open / closed states better in your app. It passes `active` and `setActive` to children. When you click outside of the children, active will be set to false. You can trigger active to be false by calling `setActive` yourself. I'm using this to better handle select inputs and make sure only one is active at a time.
###Usage
```js
{(active, setActive) => (
active ?
setActive(true)}>
Show this! It will hide on global window clicks.
setActive(false)}>
Hide this
:
//hide
)}
```
###API
- `active`: defaults to false
- `setActive`: accepts `true` or `false`
Clicking outside of the children will make `active` become false. May change to make clicking the children toggle active without you having to in the children.
###Todo
Possibly add other components. The current one will only allow one active component on the page. Maybe a component that returns active true / false on media query changes. I think the api for this is very simple, and if done right, could be really useful!