🎬👻Foldable section

Overview

Foldable

Fully automated and animated `Collapsible` primitive.

Bundlephobia Types MIT License

npm i @theuiteam/foldable

  • 🚀 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

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

License

MIT

You might also like...

stackoverflow look-alike with only the questions section

q&a forum! Description Made this project in education purpose and to have something to show in my portfolio. I copied parts of stackoverflows design b

Oct 24, 2022

Adds a section to copy snippet in GitHub repository page.

Adds a section to copy snippet in GitHub repository page.

github-snippets / Snippets section in GitHub repository Adds "Snippets" section in GitHub repository! Note This extension is unofficial. Project Setup

Nov 26, 2022
Owner
The UI Team
You and I are working on UI
The UI Team
portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

portfolio-project Those days of manually updating portfolio website after every new project made are gone ⚡ Yesss . . . you read that right. ?? portfo

Gaurav Gulati 15 Aug 3, 2021
Testimonials grid section main

Frontend Mentor - Testimonials grid section Welcome! ?? Thanks for checking out this front-end coding challenge. Frontend Mentor challenges help you i

AhmedKamal199 2 Feb 25, 2022
Utility to automatically fill foreign income section of 3-NDFL report based on tax report from Tinkoff broker

Заполнение дохода за пределами РФ в декларации 3-НДФЛ Disclaimer Автор не несет ответственности за корректное заполнение налоговой декларации. Вы запу

Oleg Elifantiev 12 Dec 9, 2022
Second-challinge - Frontend Mentor - Social proof section

Frontend Mentor - Social proof section Welcome! ?? Thanks for checking out this

Ahmed-Abdalmagid 1 Feb 8, 2022
A simple react project that contain a single page application (SPA) And a simple caculator to make some calculation and there is a section you can see some Math quotes. Ⓜ💯

A simple react project that contain a single page application (SPA) And a simple caculator to make some calculation and there is a section you can see some Math quotes. Ⓜ??

Reem janina 7 May 31, 2022
A lightweight, performant, and simple-to-use wrapper component to stick section headers to the top when scrolling brings them to top

A lightweight, performant, and simple-to-use wrapper component to stick section headers to the top when scrolling brings them to top

Mayank 7 Jun 27, 2022
Organizes all your files from from a folder into different section automatically.

File System Organizer Global command line application Organizes all your files from from a folder into different section automatically. Functionality

KAJALIYA CHARCHIL 4 Jun 15, 2022