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 => <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 = return <div> <Hider => <Show /> <Hide /> </Hider> <button =>Click to Change</button> </div>
Show just one single element just if the boolean state is true:
const Appear = const show setShow = return <div> <Hider => <Show /> </Hider> <button =>Click to Show</button> </div>
License
This project is licensed under the MIT license, Copyright © 2020 Oliver ALR.
For more information see LICENSE.md
.