‚̧Nicely Pruned Marigolds
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    react-simple-collapsible-element

    3.0.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    react-simple-collapsible-element

    npm Version

    Demo

    See example for demo, npm install and npm start
    

    Why use this?

    Simple, Lightweight, Production-ready, has all the common use cases covered. Data for the collapsible can be jsx or
    pure JSON data coming from a CMS by non-technical people.
    

    Install

    $ npm install react-simple-collapsible-element --save
    

    Usage

    $ Production-ready Simple react collapsible supports nested element and custom styling.
    

    example1.

    import Collapsible from "react-simple-collapsible-element";
     
    const data = [
      {
        title: "title 1",
        // title: <myReactComponent /> this is ok too!
        // title: (open) => open ? <PurchaseForm /> : <ProductCard />  this is ok too!
        content: "content 1" // content: <PayButton /> or content: (open) => <PayButton isActive={open} />
      },
      {
        // title and content can be a function or non-function.
        // open props is only true when the children which is content is open.
        title: open => (
          <h1 style={{ color: open ? "orange" : "white " }}>title 2</h1>
        ),
        // title: <h1>title 2</h1>   this is ok too!
        contentStyle: { backgroundColor: "red" }, // can be a classname also.
        activeContentStyle: "activeContentStyle", // classname
        content: open => (
          <ul>
            <li>{open ? "This content is currently open" : ""}</li>
            <li>content 2</li>
            <li>content 2</li>
          </ul>
        )
      }
    ];
     
    return <Collapsible data={data} />;

    example2.

    import Collapsible from 'react-simple-collapsible-element';
     
    const data = [
      {
        title: (open) => <h1>title 1 { open ? 'this is current opened!' : 'its close ATM'}</h1>,
        content: <span>content 1</span>,
        contentStyle: 'content-class'
      },
      {
        title: 'title 2',
        content: [
          {
            title: 'title 2 title 1',
            content: 'title 2 title 1 content',
            titleStyle: { backgroundColor: 'black' }, // can be a classname also.
            activeTitleStyle: 'activeTitleStyle',
            contentStyle: { backgroundColor: 'red' }, // can be a classname also.
            activeContentStyle: 'activeContentStyle'
          }
        ]
      }
    ];
     
    return <Collapsible keepOpen={true or false} data={data} />;

    Title and Content as a function

    When title and content are functions, it takes a boolean as a params, it is false by default if the Collapsible is current closed.
    

    Props

    Name Type Default Description
    title Element, function, string 'div' parent
    content Element, string, function, array div child
    keepOpen bool false whether or not keep the current element open when click on other element
    customTransition String height .3s ease-out custom transition
    titleStyle String / Object undefined Can be a style object or multiple classnames together.
    contentStyle String / Object undefined Can be a style object or multiple classnames together.
    activeTitleStyle String undefined a classname to pass to when the title is active.
    activeContentStyle String undefined a classname to pass to when the content is active.

    Install

    npm i react-simple-collapsible-element

    DownloadsWeekly Downloads

    6

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    25.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar