Reactjs-custom-accordion NPM

Custom React Accordion for ReactJS & NextJS

🚀 A Complete Custom Accordion for ReactJS & NextJS 🚀

NPM Downloads Bundle Size

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'
    }
  ]

    return (
        <>
            <h4>🚀 Default</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