@vectorform/vf-react-typescript-accordion

A React accordion element written in Typescript by Vectorform

Usage:

Install with npm or yarn:

npm install --save @vectorform/vf-react-typescript-accordion
or
yarn add @vectorform/vf-react-typescript-accordion

Import into your React project:

JavaScript:

import {Accordion} from "@vectorform/vf-react-typescript-accordion";

TypeScript:

import {Accordion, AccordionItems} "@vectorform/vf-react-typescript-accordion";

Create a array of your values:

JavaScript:

const items = [
    {
        title: "First element",
        content "First element content"
    }, 
    {
        title: "Second element",
        content "Second element content"
    }
];

TypeScript:

const items: AccordionItems[] = [
    {
        title: "First element",
        content "First element content"
    }, 
    {
        title: "Second element",
        content "Second element content"
    }
];

Render the component (JavaScript and Typescript):

<Accordion items={items}/>

Props:

items: AccordionItmes[] //Array containing the title and content of each accordion
divClass?: String //Class for the surrounding div of each accordion
titleClass?: String //Class for title (always shown) element
contentClass?: String //Class for content (expanding portion) element
openIcon?: HTMLSpanElement | JSX.Element //Optional span or Jsx element to be passed in to appear on the same line as the title (for when the accordion is expanded)
closedIcon?: HTMLSpanElement | JSX.Element //Icon to be shown when accordion is closed
multi?: boolean //allows multiple accordions to be open at once

Example using all props:

<Accordion 
    items={items}
    divClass="accordion"
    titleClass="accordion-title"
    contentClass="accordion-content"
    openIcon={<span className="oi oi-minus">}
    openIcon={<span className="oi oi-plus">}
    multi={true}
>