react-css-collapse
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-css-collapse package

    4.1.0 • Public • Published

    react-css-collapse

    Collapse component with css transition for elements with variable and dynamic height.

    Build Status npm version npm downloads

    Example

    Accordion using react-css-collapse

    Install

    rc-collapse

    Support

    Global coverage > 92% - browserl.ist

    Usage

    import Collapse from 'react-css-collapse';
     
    <Collapse isOpen={true || false}>
      <div>content</div>
    </Collapse>

    Properties

    isOpen: PropTypes.boolean

    Expands or collapses content.

    children: PropTypes.node

    <Collapse isOpen={true}>
      <p>Paragraph of text</p>
      <p>Another paragraph is also OK</p>
      <p>Images and any other content are ok too</p>
      <img src="cutecat.gif" />
    </Collapse>

    className: PropType.string

    Specify transition using the class selector with transition or the style property. The react-css-collapse-transition class selector is added by default unless you specify your own.
    The default transition can be overridden using the transition prop, or with custom styling 👇. Note: replace the selector with your selector if you have specified a different className.

    .react-css-collapse-transition {
      transition: height 250ms cubic-bezier(.4, 0, .2, 1);
    }

    onRest: PropTypes.func

    Callback function for when your transition on height (specified in className) is finished. It can be used to trigger any function after transition is done.

    ARIA and data attributes

    Collapse transfers aria- and data- attributes to the component's rendered DOM element. For example this can be used to set the aria-hidden attribute:

    <Collapse isOpen={isOpenState} aria-hidden={isOpenState ? 'false' : 'true'}>
      <p>Paragraph of text</p>
    </Collapse>

    Development and testing

    To run example covering all features, use npm run storybook.

    git clone [repo]
    cd [repo]
    npm install
    npm run storybook

    Open http://localhost:6006 🎆

    Install

    npm i react-css-collapse

    DownloadsWeekly Downloads

    3,532

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    27.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • thalseth