Foldable section
npm install @theuiteam/foldableFully automated and animated Collapse primitive.
- 🚀 Based on CSS transition, working as fast as possible
- 👩🔬 Automatic height measurement even for such complex cases as code split content
- 📦 Composable API, simple yet powerful
- 🔋 Batteries included, just ~~add water~~ provide children
- 🤖 Powered by state machines, all animations are reversible
- 👩👧 Small - 1kb (even before Gzip, if you subtract tslib)
``bash`
npm add @theuiteam/foldable
- simple accordion, codesandbox
Works for the majority of possible case
`tsx
import {FoldableSection} from "@theuiteam/foldable";
// just tell it when it's time to be open
{/this content will NOT BE rendered/accessible for closed sections/}
`
| Prop | Type | Description |
| ------------------ | ----------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| open | boolean | Control expanded/collapsed state |
| transitionDuration | number | Time for animation, default 300ms |
| [keepContent] | boolean | Renders content even in hidden state |
| [controlProperty] | height, max-height, custom variable | Controls how height is set, default max-height |
| [onStateChange] | (currentState: Phase)=>void | Allows custom hooks into state transition. You might be interesting to know about animating and idle states |
Accessibility is expected to be configured "from the outside".
Please follow WAI-ARIA example or check out storybook example.
> styles used by Foldable will be created only when needed, which makes them
> more _specific_ than styles you might create
There are 3 ways to configure animation
- specify style prop
`tsx`
style={{ transitionTimingFunction: 'ease-in' }}
/>
- specify className
`tsx`
className={ClassWithTransitionTimingFunction}
/>
- override classes
`tsx`
animationClassName={doWhatEverYouWant}
/>
Foldable is split into two pieces
- Measurer, this is the "core" functionality
- Measusable, which implementation can be replaced
> 💡 Usecase: For example one can await for all images inside to be loaded, or at least have known dimensions
`tsx``
const MyCollapsible = ({children, open}) => (
({display, prepare, onReady}) => (
<>
// display children when told
{display && children}
// call measuringCallback to indicate readyness
{prepare &&
>
)}
)
- https://github.com/kunukn/react-collapse - similar package with less functionality
MIT