react-hider

Conditional Rendering Made Easy

Usage no npm install needed!

<script type="module">
  import reactHider from 'https://cdn.skypack.dev/react-hider';
</script>

README

react-hider


Conditional Rendering Made Easy
A minimalist show or not library based on conditional rendering foundations

Release Dependencies Version License

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.