README
Conditional Rendering Made Easy
A minimalist show or not library based on conditional rendering foundations
Created by Oliver ALR and mantained with ❤️ and ☕️. Join me just contributing 💻
Features
- Just one component
- Wrap all your to-render components inside Hider component.
- Less verbose components
- Simple as reduce dirty components doing more readable code.
- Inline if with && logical operator
- Render one single component if the condition is true.
- Inline if-else with conditional operator
- Render or not an expected value based on a boolean prop.
Get Started
npm install react-hider
import Hider from 'react-hider'
Wrap first the component to show and second the component to hide inside Hider(library provided) or use pure raw jsx and provide a boolean(true/false) state:
<Hider state={boolean}>
<ComponentToShow />
<ComponentToHide />
</Hider>
Examples Up and Running
Show or Hide elements based on a boolean(true/false) pased to state prop:
const DisAppear = () => {
const [hide, setHide] = useState(true)
return (
<div>
<Hider state={hide}>
<Show />
<Hide />
</Hider>
<button onClick={() => setHide(false)}>Click to Change</button>
</div>
)
}
Show just one single element just if the boolean state is true:
const Appear = () => {
const [show, setShow] = useState(false)
return (
<div>
<Hider state={show}>
<Show />
</Hider>
<button onClick={() => setShow(true)}>Click to Show</button>
</div>
)
}
License
This project is licensed under the MIT license, Copyright © 2020 Oliver ALR.
For more information see LICENSE.md
.