React-Fast-Accordion - GitLite

KO | EN

gitlite — search

#ai #typescript #llm #go #machine-learning #deep-learning #java #cli #vue #awesome-list #security #pytorch #mcp #ios

React-Fast-Accordion

(★ 56)

Simple, fast, accessible accordion library with no dependency

File Explorer

Download Latest Version (.zip)

- - publish-to-npm.yml
- app.css
- App.tsx
- main.tsx
- vite-env.d.ts
- index.tsx
- ListItem.tsx
- style.css
.gitignore
index.html
LICENSE
package.json
pnpm-lock.yaml
README.md
tsconfig.json
tsconfig.node.json
tsup.config.ts
vite.config.ts
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/ShivamJoker/React-Fast-Accordion

Downloads the entire project code from GitHub to your computer.

cd React-Fast-Accordion

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install react-fast-accordion

Downloads and installs the libraries listed in package.json.

yarn add react-fast-accordion

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Fast Accordion ⚡️

Dynamic, fast, accessible & zero dependency accordion for React

[![Npm version](https://img.shields.io/npm/v/react-fast-accordion?style=flat-square)](https://www.npmjs.com/package/react-fast-accordion)
![Downloads](https://img.shields.io/npm/dm/react-fast-accordion?style=flat-square)

## 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

![Screen recording of accordion](https://user-images.githubusercontent.com/23727670/155312319-7ebafee5-e532-43c6-821a-52dc5d753cd3.gif)

[![Edit React fast accordion demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-yalow-fm0hkf?fontsize=14&hidenavigation=1&theme=dark&view=preview)

## Video tutorial
[![Accordion tutorial-5](https://user-images.githubusercontent.com/23727670/155474669-91e23e2f-98e2-4776-9a3b-7b86d72e77fe.jpg)](https://youtu.be/Ey96fsnqaEc)

## Installation

Install with npm

```bash
  npm install react-fast-accordion
```

Install with yarn

```bash
  yarn add react-fast-accordion
```

## Example

```ts
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.  ❌ |