eDonec-collapsible

​ React component to wrap content inside collapsible when the option of open and close it.

​

Installation

​

​
npm install edonec-collapsible --save
​
yarn add edonec-collapsible
​

​

Usage

​

import React from 'react';
import Collapsible from '@edonec/collapsible';
import '@edonec/collapsible/build/index.css';

// In case you do not want to customize the icons just import our's (more like fontawsome's) !
import '@edonec/collapsible/build/icons.css';
​
const App: React.FC = () => {
  return (
    <Collapsible open header="collapse">
      Consectetur adipiscing elit pellentesque habitant morbi tristique. Pulvinar pellentesque
      habitant morbi tristique. Vel quam elementum pulvinar etiam. Pulvinar pellentesque
      habitant morbi tristique senectus
    </Collapsible>
  );
};
​
export default App;

​

HTML usage

​

<div class="collapsible-card-edonec">
  <div class="collapsible-header-edonec">
    <div class="title-text-edonec">collapse header</div>
    <button type="button" class="collapsible-icon-button-edonec">
      <i class="fas fa-chevron-down-edonec rotate-center-edonec down"></i>
    </button>
  </div>
  <div class="collapsible-content-edonec" style="height: 82px;">
    <div class="collapsible-content-padding-edonec">
      Consectetur adipiscing elit pellentesque habitant morbi tristique.
      Pulvinar pellentesque habitant morbi tristique. Vel quam elementum
      pulvinar etiam. Pulvinar pellentesque habitant morbi tristique senectus
    </div>
  </div>
</div>

​

Props (Options)

​ | Prop | Description | types | isRequired | | ------------------------- | --------------------------------------------------------- | ------------------------- | ---------- | | open | initial state of the collapse | boolean | True | | header | <Collapsible header /> | React.ReactNode or string | False | | titleClassName | title className : default text | string | False | | iconButtonClassName | button wrapped with the icon className | string | False | | contentClassName | Collapsible content className : default transition height | string | False | | contentContainerClassName | container className : default padding | string | False | | iconUp | Icon button in the corner looking upward | React.ReactNode | False | | iconDown | Icon button in the corner looking downward | React.ReactNode | False | ​

How it was made

If you want to read how it was created feel free to do so in our Medium article

Issues

​ Please create an issue for any bug or feature requests.