react-accordion-simple
Version:
Simple to use react accordion wrapper component with style config.
113 lines (87 loc) • 4.57 kB
Markdown
# React Accordion Component Simple
Simple to use react accordion wrapper component with style config.
## How it works
- The component works as a wrapper which turns the content added into an accordion.
## How to use
### Install
Installation: `npm install react-accordion-simple`
### Usage
Import the package into your app:
`import { AccordionComponent } from "react-accordion-simple";`
#### Component Example:
```
<AccordionComponent
titlePadding={"1rem"}
titleColour={"white"}
titleBackgroundColour={"#2C514C"}
borderBottomColour={"white"}
contentPadding={"1rem"}
contentColour={"black"}
contentBackgroundColour={"white"}
>
<>
<div className="title">
<h3>Number One</h3>
</div>
<div className="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, leo vel sodales auctor, lorem leo vehicula magna, nec tincidunt leo nunc vel diam. Aenean aliquet eleifend volutpat.</p>
<p>Maecenas efficitur molestie metus in ultricies. Suspendisse porta, nisl et blandit congue, velit est ultricies augue, nec ullamcorper arcu sapien tempor ante.</p>
<p> Mauris interdum porta libero, eget varius metus dignissim id. Duis sollicitudin lacinia ipsum sed tempor. </p>
</div>
</>
<>
<div className="title">
<h3>Number Two</h3>
</div>
<div className="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, leo vel sodales auctor, lorem leo vehicula magna, nec tincidunt leo nunc vel diam. Aenean aliquet eleifend volutpat.</p>
<p>Maecenas efficitur molestie metus in ultricies. Suspendisse porta, nisl et blandit congue, velit est ultricies augue, nec ullamcorper arcu sapien tempor ante.</p>
<p> Mauris interdum porta libero, eget varius metus dignissim id. Duis sollicitudin lacinia ipsum sed tempor. </p>
</div>
</>
<>
<div className="title">
<h3>Number Three</h3>
</div>
<div className="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, leo vel sodales auctor, lorem leo vehicula magna, nec tincidunt leo nunc vel diam. Aenean aliquet eleifend volutpat.</p>
<p>Maecenas efficitur molestie metus in ultricies. Suspendisse porta, nisl et blandit congue, velit est ultricies augue, nec ullamcorper arcu sapien tempor ante.</p>
<p> Mauris interdum porta libero, eget varius metus dignissim id. Duis sollicitudin lacinia ipsum sed tempor. </p>
</div>
</>
<>
<div className="title">
<h3>Number Four</h3>
</div>
<div className="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, leo vel sodales auctor, lorem leo vehicula magna, nec tincidunt leo nunc vel diam. Aenean aliquet eleifend volutpat.</p>
<p>Maecenas efficitur molestie metus in ultricies. Suspendisse porta, nisl et blandit congue, velit est ultricies augue, nec ullamcorper arcu sapien tempor ante.</p>
<p> Mauris interdum porta libero, eget varius metus dignissim id. Duis sollicitudin lacinia ipsum sed tempor. </p>
</div>
</>
</AccordionComponent>
```
### Component Options:
- The <AccordionComponent> MUST follow this format
<>
<div className="title">
</div>
<div className="content">
</div>
</>
- `titlePadding={"1rem"} `
Padding for title.
- `titleColour={"white"}`
Text colour for title.
- `titleBackgroundColour={"#2C514C"}`
Title Bakcground Colour.
- `borderBottomColour={"white"}`
Border between titles colour.
- `contentPadding={"1rem"}`
Content section padding.
- `contentColour={"black"}`
Content section text colour.
- `contentBackgroundColour={"white"}`
Content section background colour.
## Example
