Have ideas to improve npm?Join in the discussion! »

    react-performant-collapsible
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    react-performant-collapsible

    A performant React.js Collapsible component.

    Demo

    Why it's performant?

    It doesn't repaint at all during the collapse/expand animation: Doesn't Repaint

    Installation

    npm i react-performant-collapsible

    or

    yarn add react-performant-collapsible

    or

    pnpm i react-performant-collapsible

    Props

    Prop Name Type Required Note
    className String false className for the wrapper element
    style Object false style for the wrapper element
    maskColor String false background color for the mask element
    animationDuration String false how long does the collapse/expand animation take. format is like 1s or 400ms, same as CSS property transition-duration
    animationTimingFunction String false format is like linear or cubic-bezier(.29, 1.01, 1, -0.68), same as CSS property transition-timing-function
    collapsible Boolean true is currently collapsed or not
    children React Node true

    What is props maskColor used for?

    Sometimes if the background color is not white, you need to set the maskColor to match the background color, e.g.

    <div style={{background: 'red'}}>
      <Collapsible collapsible={state.collapsible} maskColor="red">
        { someChildren }
      </Collapsible>
    </div>

    Install

    npm i react-performant-collapsible

    DownloadsWeekly Downloads

    32

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    33.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar