React Fast Accordion
⚡️
Dynamic, fast, accessible & zero dependency accordion for React
How it's fast?
- Instead of adding event listener on all the items, it only adds to the container.
- It has zero dependency, the animations are done using web animation API
- Detail component dynamically gets added to the DOM
Demo
Video tutorial
Installation
Install with npm
npm install react-fast-accordion
Install with yarn
yarn add react-fast-accordion
Example
{ return { id: faker.datatype.uuid(), title: faker.hacker.noun(), content: faker.hacker.phrase(), }; }); // create type if you need intellisense type CompProps = typeof data[0] & { isOpen: boolean; onClick: (txt: string) => void; }; // all the props get passed here with isOpen const SummaryComponent = ({ title, isOpen }: CompProps) => (
{title} 👇
); // component will get wrapped in
const DetailComponent = ({ content, onClick }: CompProps) => (
alert("You clicked on\n" + txt)} // set it to false if you want only one accordion to open multiExpand={true} SummaryComponent={SummaryComponent} DetailComponent={DetailComponent} />
); };">
onClick(content)}>{content}
); const App = () => { return (import React from "react"; import { faker } from "@faker-js/faker"; import Accordion from "react-fast-accordion"; // Your list - array of objects, id is required const data = Array.from({ length: 200 }, () => { return { id: faker.datatype.uuid(), title: faker.hacker.noun(), content: faker.hacker.phrase(), }; }); // create type if you need intellisense type CompProps = typeof data[0] & { isOpen: boolean; onClick: (txt: string) => void; }; // all the props get passed here with isOpen const SummaryComponent = ({ title, isOpen }: CompProps) => ( <div className="header"> {title} <span className={(isOpen ? "open" : "") + " chevron"}>👇</span> </div> ); // component will get wrapped inconst DetailComponent = ({ content, onClick }: CompProps) => ( <p onClick={() => onClick(content)}>{content}</p> ); const App = () => { return ( <div> <Accordion items={data} // you can pass any props, // it will be passed to the Detail & Summary onClick={(txt: string) => alert("You clicked on\n" + txt)} // set it to false if you want only one accordion to open multiExpand={true} SummaryComponent={SummaryComponent} DetailComponent={DetailComponent} /> </div> ); };
Accordion props
| Parameter | Type | Description | Required |
|---|---|---|---|
items |
Array<{id: string, ...}> |
List which you want to render | Yes |
SummaryComponent |
React.Element |
Component for rendering summary | Yes |
DetailComponent |
React.Element |
Component shown on expanding | Yes |
multiExpand |
boolean default:false |
Expand only one at a time | No. |
0 Dec 29, 2022
4 Dec 18, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
5 Dec 20, 2022
830 Jan 1, 2023
31 Oct 24, 2022
46 Nov 24, 2022
39 Dec 8, 2022