1.0.23 • Published 7 years ago

react-simple-collapsible v1.0.23

Weekly downloads
10
License
MIT
Repository
-
Last release
7 years ago

react-simple-collapsible

npm

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

demonstration

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

typerequireddefault valuedescription
headerTitlePropTypes.stringNOHeader title (always visible)
collapsedPropTypes.boolNOtrueCollapse 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