Package Exports

react-simple-collapsible-element

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-simple-collapsible-element) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-simple-collapsible-element

Install

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

Usage

$ Simple react collapsible supports nested element and custom styling.

example1.

import Collapsible  from 'react-simple-collapsible-element';

    const data = [
      {
        title: 'title 1',
        content: 'content 1'
      },
      {
        title: 'title 2',
        contentStyle: { backgroundColor: 'red' } , // can be a classname also.
        activeContentStyle: 'activeContentStyle', // classname
        content: 'content 2'
      },
    ];

    return <Collapsible data={data} />

example2.

import Collapsible  from 'react-simple-collapsible-element';

const data = [
  {
    title: <h1>title 1</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 data={data} />

Props

Name	Type	Default	Description
`title`	`Element`	`'div'`	parent
`content`	`Element / array`	`div`	child
`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.