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
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 in <div class="acc-content">
const 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
4 Dec 8, 2022
600 Dec 8, 2022
7 Dec 20, 2022
1 Dec 16, 2020
44 Jul 6, 2022
604 Dec 8, 2022
6.7k Jan 3, 2023