react-simple-collapsible

A very simple , customizable and animated collapsible component for React.

Features

• Fully customizable
• Easy to use
• Animated!

Installation

npm

npm install --save react-simple-collapsible

yarn

yarn add react-simple-collasible

Usage

Add the Collapsible component to your root component

import React, { Component } from 'react';
import { Collapsible } from 'react-simple-collapsible';

class App extends Component {
  render() {
    return (
      <div className="App">
         <Collapsible headerTitle="Very Simple Title">
            <p>Insert any html you want in here...</p>
        </Collapsible>
      </div>
    );
  }
}

export default App;

API

Props

| |type|required|default value|description| |---|--- |--- |--- |--- | |headerTitle|PropTypes.string|NO| |Header title (always visible)| |collapsed|PropTypes.bool|NO|true|Collapse the component|

Styles

To change the styles simply override the CSS classes wrapping them within the containers and add your own style to them! For expample:

.collapsible-header{
	background-color: yellow;
}

.collapsible-content{
	font-style: italic;
}

That way, you can leave the JS clean and keep the styles within the CSS.

About

This project was written and is maintained by Facundo Larrosa Bringas.

License

MIT