npm:height-zero2auto

Usage no npm install needed!

<script type="module">
  import heightZero2auto from 'https://cdn.skypack.dev/height-zero2auto';
</script>

README

height: 0px or other initial value | must auto

transitionDuration: number

transitionTimingFunction: 'linear' .... 1.1.0: fix when fold state can not sync 1.0.6: fix init render will auto spread


const { HeightZeroToAuto } = 'height-zero2auto';

function Demo(){
    const [isFold, setIsFold] = useState(true);
    return (
        <>
            <button
                onClick={()=>{
                    setIsFold(!isFold);
                }}
            >FOLD</button>
            <div
             style={{
                 border: '1px solid #000'
             }}
            >
                <HeightZeroToAuto
                    transitionDuration={400}
                    transitionFunc={'ease'}
                    height={isFold ? '0px': 'auto'}
                >
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                </HeightZeroToAuto>
            </div>
        </>
    )
}