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: 22 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-03-26T20:46:37.000Z (over 2 years ago)
• Last Synced: 2024-05-01T17:45:52.618Z (6 months 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

        
![react-hider](logo/react-hider-logo.jpg)




Conditional Rendering Made Easy

A minimalist show or not library based on conditional rendering foundations







![Release](https://img.shields.io/badge/release-v1.0.3-success) ![Dependencies](https://img.shields.io/badge/dependencies-up%20to%20date-success) ![Version](https://img.shields.io/github/v/release/facebook/react?logo=react) ![License](https://img.shields.io/npm/l/react?color=blue)





    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.





     
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`.