@theuiteam/foldable

Foldable

Fully 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)

Instalation

npm add @theuiteam/foldable

Example

• simple accordion, codesandbox

Works for the majority of possible case

import {FoldableSection} from "@theuiteam/foldable";

<button onClick={() => setOpen(!isOpen)}>Toggle</button>
// just tell it when it's time to be open
<FoldableSection open={isOpen}>
    {/*this content will NOT BE rendered/accessible for closed sections*/}
    <AnyContent/>
    <EvenLazyLoadedComponents/>
</FoldableSection>

API

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

A11y

Accessibility is expected to be configured "from the outside". Please follow WAI-ARIA example or check out storybook example.

Configuring animations

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

<FoldableSection
  // inline styles are always more specific
  style={{ transitionTimingFunction: 'ease-in' }}
/>

• specify className

<FoldableSection
  // could configure only non-conflicting props (or do !important)
  className={ClassWithTransitionTimingFunction}
/>

• override classes

<FoldableSection
  // out-out default configuration
  animationClassName={doWhatEverYouWant}
/>

Advanced usage

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

const MyCollapsible = ({children, open}) => (
    <MeasurableSection open={open}>
        ({display, prepare, onReady}) => (
        <>
            // display children when told
            {display && children}
            // call measuringCallback to indicate readyness
            {prepare && <CallThisWhenYouAreReady cb={onReady}/>}
        </>
        )}
    </MeasurableSection>
)

See also

• https://github.com/kunukn/react-collapse - similar package with less functionality

License

MIT