Accordion Component

The Accordion component is a container that can be expanded and collapsed

Props

Accordion

NAME	TYPE	DESCRIPTION
isOpen	boolean	isOpen state of the accordion
disabled	boolean	Disabled state of the accordion
children	ReactNode	The Accordion Title and Item components that will be displayed

Accordion Title

NAME	TYPE	DEFAULT	DESCRIPTION
isOpen	boolean		isOpen state of the accordion
onClick	() => void		onClick callback function
icon	ReactNode	<BsChevronDown />	icon to toggle accordion
disabled	boolean		Disabled state of the accordion
children	ReactNode		The child component that will be displayed
style	ReactCSSProperties		Styling of the accordion

Accordion Item

NAME	TYPE	DESCRIPTION
isOpen	boolean	isOpen state of the accordion
onSelect	() => void	onSelect callback function
children	ReactNode	The child component that will be displayed

Component

Default

The default accordion component is a simple accordion that can be used to display information in a collapsable format.

Title 1

Content 1

Title 2

Content 2

Title 3

Content 1


  <Accordion>
    <AccordionTitle>
      Title 1
    </AccordionTitle>
    <AccordionItem onSelect={() => {}}>
      Content 1
    </AccordionItem>
  </Accordion>
  <Accordion>
    <AccordionTitle>
      Title 2
    </AccordionTitle>
    <AccordionItem>
      Content 2
    </AccordionItem>
  </Accordion>
  <Accordion>
    <AccordionTitle>
      Title 3
    </AccordionTitle>
    <AccordionItem>
      Content 3
    </AccordionItem>
  </Accordion>

Disabled state

The accordion component can be disabled by passing the disabled prop.

Title 1

Content 1

Title 2

Content 2



  <Accordion>
    <AccordionTitle>
      Title 1
    </AccordionTitle>
    <AccordionItem onSelect={() => {}}>
      Content 1
    </AccordionItem>
  </Accordion>
  <Accordion disabled>
    <AccordionTitle>
      Title 2
    </AccordionTitle>
    <AccordionItem>
      Content 2
    </AccordionItem>
  </Accordion>

Custom Icon

The accordion title's icon can be customized by passing the icon prop.

Title 1

Content 1


import {AiOutlinePlus} from "react-icons/ai";

const CustomAccordion = () => {
  <Accordion>
    <AccordionTitle icon={<AiOutlinePlus/>}>
      <p style={{margin: 0}}>Title 1 </p>
    </AccordionTitle>
    <AccordionItem>
      <p style={{margin: 0}}>Content 1 </p>
    </AccordionItem>
  </Accordion>
}