> A lighweight and minimalist HTML react hook collapsible that uses CSS transitions
npm install react-hook-collapse> A lighweight and minimalist HTML react hook collapsible that uses CSS transitions
``bash`
$ npm install react-hook-collapse
---
> Don't use vertical padding or border on the mask element. Create a wrapper or use pseudo elements :after/:before
---
---
Example #1 - using Ref and Hook:
`js
import useCollapse, { Collapsible } from 'react-hook-collapse';
import React, { useState, useRef } from 'react';
function MyComponent() {
const ref = useRef();
const [state, setState] = useState(false);
useCollapse(ref, state);
return (
setState(!state);
}}
>
Toggle
...content...
);
}
`
Example #2 - using the baked Collapsible component:
`js
import { Collapsible } from 'react-hook-collapse';
import React, { useState, useRef } from 'react';
function MyComponent() {
const [state, setState] = useState(false);
return (
setState(!state);
}}
>
Toggle
style={{ overflow: 'hidden', transition: '0.3s' }}
>
...content...
);
}
``
---
- CSS transition based, you can set the animation duration using your favorite CSS framework.
- Performs better than JS based animations.
- No CSS Classes, no external styles.
- Zero dependency
- Doesn't manipulate component Props.
- Doesn't stack animations on fast toggle.
- Doesn't lock the mask height. Sets to 'auto' when animation is finished.
---
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event#browser_compatibility