oliverloops/react-hider

🎩 A minimalist show or not library based on conditional rendering foundations

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.

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:

<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>
    )
}

You can use one or both unwrapped elements too:

const DisAppear = () => {
    const [hide, setHide] = useState(true)

    return (
        <div>
            <Hider state={hide}>
                <Show />
                <span>
                    <h2>I want to hide this content</h2>
                    <small>This content is initially hided</small>
                </span>
            </Hider>
            <button onClick={() => setHide(false)}>Click to Change</button>
        </div>
    )
}

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.