https://github.com/oliverloops/react-hider
🎩 A minimalist show or not library based on conditional rendering foundations
https://github.com/oliverloops/react-hider
conditional-rendering jsx react
Last synced: 18 days ago
JSON representation
🎩 A minimalist show or not library based on conditional rendering foundations
- Host: GitHub
- URL: https://github.com/oliverloops/react-hider
- Owner: oliverloops
- License: mit
- Created: 2020-06-06T13:53:38.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-03-26T20:46:37.000Z (about 3 years ago)
- Last Synced: 2025-04-12T22:44:38.692Z (18 days ago)
- Topics: conditional-rendering, jsx, react
- Language: JavaScript
- Homepage:
- Size: 164 KB
- Stars: 31
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README

Conditional Rendering Made EasyA minimalist show or not library based on conditional rendering foundations
   
## 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.
- Working on version 1.1 😬
### 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 component or use pure raw jsx and provide an initial boolean(true/false) state:
```jsx
```
## Examples Up and Running
Show or Hide elements based on a boolean(true/false) pased to state prop:
```jsx
const DisAppear = () => {
const [hide, setHide] = useState(true)
return (
setHide(false)}>Click to Change
)
}
```
Show just one single element just if the boolean state is true:
```jsx
const Appear = () => {
const [show, setShow] = useState(false)
return (
setShow(true)}>Click to Show
)
}
```
You can use one or both unwrapped elements too:
```jsx
const DisAppear = () => {
const [hide, setHide] = useState(true)
return (
I want to hide this content
This content is initially hided
setHide(false)}>Click to Change
)
}
```
Just wrap inside Hider all the elements required even if this ones aren't inside a component.
## License
This project is licensed under the MIT license, Copyright © 2020 Oliver ALR.
For more information see `LICENSE.md`.