Skip to content

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

License

Notifications You must be signed in to change notification settings

oliverloops/react-hider

Repository files navigation

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published