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