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

1.3.2 • Public • Published

React collapsible wrapper

Lightweight collapsible wrapper that is easy to use and customizable.

screen-gif

Install

npm i react-collapsible-wrapper

Properties

Required

  • isOpen (boolean) If wrapper should collapse or not

Optional

  • duration (number) | Transition duration in seconds | Based on content
  • easing (string) | Acceleration curve | linear
  • tagName (string) | The wrapper tag | div
  • ref (MutableRefObject<HTMLElement>) | Get element reference | Internally created
  • updateAfterInitRender: (boolean) | Force update after initial render | false
  • updateHeightOnResize: (boolean) | Recalculate height on window resize | false
  • tabIndex
  • className
  • id
  • style
  • onTransitionEnd
  • onChange

Simple Example:

import React, { useState } from "react";
import Collapse from "react-collapsible-wrapper";

const ExampleComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <article>
      <Collapse isOpen={isOpen}>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas, mi vel ultrices lacinia, lacus nibh
          vestibulum nunc, ac fringilla nisl magna tempor mi.
        </p>
      </Collapse>

      <button onClick={() => setIsOpen(!isOpen)}>Click me!</button>
    </article>
  );
};

export default ExampleComponent;

Package Sidebar

Install

npm i react-collapsible-wrapper

Weekly Downloads

80

Version

1.3.2

License

MIT

Unpacked Size

146 kB

Total Files

12

Last publish

Collaborators

  • henrikdk