Custom React Accordion for ReactJS & NextJS
๐ A Complete Custom Accordion for ReactJS & NextJS ๐
Live Demo
Install
Using NPM:
npm install reactjs-custom-accordion
Using Yarn:
yarn add reactjs-custom-accordion
Usage
import React from 'react'
import { Accordion } from 'reactjs-custom-accordion'
function Demo() {
const sampleData = [
{
title: 'title 1',
description: 'description 1'
},
{
title: 'title 2',
description: 'description 2'
}
]
return (
<>
<h4>๐ Default Accordion with sample data</h4>
<Accordion data={sampleData} />
</>
)
}
export default Demo
Props
Name | Type | Default | Optional |
---|---|---|---|
data |
Array of Objects | undefined |
โ |
PlusIcon |
Component | AiOutlinePlusSquare |
โ |
MinusIcon |
Component | AiOutlineMinusSquare |
โ |
headerBackground |
String | #1a1a1a |
โ |
footerBackground |
String | #fff |
โ |
plusIconSize |
String | 25px |
โ |
minusIconSize |
String | 25px |
โ |
plusIconColor |
String | #fff |
โ |
minusIconColor |
String | #fff |
โ |
accordionWidth |
String | 80% |
โ |
roundedBorders |
Boolean | false |
โ |
defaultOpen |
Boolean | false |
โ |
defaultOpenIndex |
Integer | undefined |
โ |
defaultAllOpen |
Boolean | false |
โ |
rootClass |
String | undefined |
โ |
cardClass |
String | undefined |
โ |
headerClass |
String | undefined |
โ |
footerClass |
String | undefined |
โ |
Usage with Props
import React from 'react'
import { Accordion } from 'reactjs-custom-accordion'
import {FaBed} from "react-icons/fa"
import sampleData from '../../Data'
function Demo() {
return (
<>
<Accordion
data={sampleData}
defaultOpen={true} // Set to true if need to open any Accordion by default
defaultOpenIndex={0} // Index of Accordion to open by default
roundedBorders={true} // Set to true if need rounded borders
PlusIcon={FaBed} // Icons from React Icons
headerBackground="#444" // Color code, RGB Code or Color Name
plusIconSize="30px" // Size of Icon
accordionWidth="90%" // Width of Accordion with regard to Root Container
rootClass="custom-root-class" // Custom class of Root Container
cardClass="custom-card-class" // Custom class of Accordion Card
headerClass="custom-header-class" // Custom class of Header
footerClass="custom-footer-class" // Custom class of Footer
/>
</>
)
}
export default Demo
Checkout Example App in /example
Directory
License
MIT ยฉ theinfosecguy