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
<Active className="container" activeClassName="active" active={false}>
{(active, setActive) => (
active ?
<div onClick={() => setActive(true)}>
Show this! It will hide on global window clicks.
<div onClick={() => setActive(false)}>
Hide this
</div>
</div>
:
//hide
)}
</Active>
API
-
active
: defaults to false -
setActive
: acceptstrue
orfalse
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!