React-collapse-details NPM

react-collapse-details

React component for extra content

https://user-images.githubusercontent.com/33287490/138172984-83e1c7bc-717c-490a-a713-a1e7903451ad.mp4

How to install

Below are ways to install the library using npm or yarn:

npm i react-collapse-details
# ou
yarn add react-collapse-details

How to use default component

import DetailsCollapse from "react-collapse-details";

<DetailsCollapse summary="Lorem ipsum dolor sit">
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima voluptates
    obcaecati
  </p>
</DetailsCollapse>;

How to use custom props component

import DetailsCollapse from "react-collapse-details";

<DetailsCollapse
  summary="Lorem ipsum dolor sit"
  width="60rem"
  bgColor="red"
  bgHover="blue"
  color="yellow"
  colorHover="pink"
  borderRadius="1em"
>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima voluptates
    obcaecati
  </p>
</DetailsCollapse>;

Properties

This component is an abstraction of a collapse, but using native HTML properties.

Props	type	required	Description
width	string
summary	string	X
children	element	X
bgColor	string		Background color of summary
bgHover	string		Background color hover of summary
color	string		Color of summary
colorHover	string		Color hover of summary
borderRadius	string		Border radius of summary
border	string		Border of summary
styleDetailsContent	string		Class to style the content