Features

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.