|
1 |
| -# React Accordion |
| 1 | +```markdown |
| 2 | +# 🎉 React Accordion |
2 | 3 |
|
3 |
| -- A lightweight and accessible React accordion component with smooth animations using Motion. Built with TypeScript and styled with Tailwind CSS, it supports controlled and uncontrolled modes, multiple open items, and customizable icons. |
| 4 | +A lightweight and accessible React accordion component with smooth animations. This library provides an easy way to add collapsible content sections to your applications. |
4 | 5 |
|
5 |
| -- This package is designed to be easy to use and integrate into your projects, providing a seamless user experience. The component is fully customizable, allowing you to tailor it to your specific design needs. With its focus on accessibility and performance, this accordion component is a great choice for any React application. |
| 6 | + |
6 | 7 |
|
7 |
| -## **Prerequisites** |
| 8 | +## Table of Contents |
8 | 9 |
|
9 |
| -- [Node.js](https://nodejs.org/) (version 16 or higher) |
10 |
| -- [Motion](https://motion.dev/) |
11 |
| -- [Tailwind CSS](https://tailwindcss.com/) |
| 10 | +- [Features](#features) |
| 11 | +- [Installation](#installation) |
| 12 | +- [Usage](#usage) |
| 13 | +- [Customization](#customization) |
| 14 | +- [Examples](#examples) |
| 15 | +- [Accessibility](#accessibility) |
| 16 | +- [Contributing](#contributing) |
| 17 | +- [License](#license) |
| 18 | +- [Releases](#releases) |
12 | 19 |
|
13 |
| -### Installation |
| 20 | +## Features |
14 | 21 |
|
15 |
| -Run the following command to install the required dependencies: |
| 22 | +- Lightweight: Minimal footprint for quick load times. |
| 23 | +- Accessible: Follows best practices for accessibility. |
| 24 | +- Smooth Animations: Adds a polished look to your UI. |
| 25 | +- Easy to Customize: Adjust styles easily with TailwindCSS or custom CSS. |
| 26 | +- Responsive: Works well on all devices. |
| 27 | + |
| 28 | +## Installation |
| 29 | + |
| 30 | +To install the React Accordion component, run the following command: |
16 | 31 |
|
17 | 32 | ```bash
|
18 |
| -npm install motion tailwindcss |
| 33 | +npm install react-accordion |
| 34 | +``` |
| 35 | + |
| 36 | +## Usage |
| 37 | + |
| 38 | +To use the component, import it into your React application. Here is a basic example: |
| 39 | + |
| 40 | +```javascript |
| 41 | +import React from 'react'; |
| 42 | +import Accordion from 'react-accordion'; |
| 43 | + |
| 44 | +function App() { |
| 45 | + return ( |
| 46 | + <Accordion> |
| 47 | + <Accordion.Item title="Section 1"> |
| 48 | + <p>This is the content of section 1.</p> |
| 49 | + </Accordion.Item> |
| 50 | + <Accordion.Item title="Section 2"> |
| 51 | + <p>This is the content of section 2.</p> |
| 52 | + </Accordion.Item> |
| 53 | + </Accordion> |
| 54 | + ); |
| 55 | +} |
| 56 | + |
| 57 | +export default App; |
19 | 58 | ```
|
20 | 59 |
|
21 |
| -## **Usage** |
| 60 | +## Customization |
| 61 | + |
| 62 | +You can customize the Accordion component by passing props for styles, animations, and more. Here’s how to use TailwindCSS for styling: |
| 63 | + |
| 64 | +```javascript |
| 65 | +<Accordion.Item className="bg-gray-200 p-4 rounded-lg"> |
| 66 | + <h2 className="text-xl font-bold">Custom Title</h2> |
| 67 | + <p className="text-gray-700">Custom content here.</p> |
| 68 | +</Accordion.Item> |
| 69 | +``` |
| 70 | + |
| 71 | +## Examples |
| 72 | + |
| 73 | +You can find more detailed examples in the **Examples** directory. Here are a few scenarios: |
| 74 | + |
| 75 | +### Basic Accordion |
| 76 | + |
| 77 | +This shows how to implement a simple accordion. |
| 78 | + |
| 79 | +### Nested Accordions |
| 80 | + |
| 81 | +Learn how to create nested accordion items for more complex layouts. |
| 82 | + |
| 83 | +### Themed Accordion |
| 84 | + |
| 85 | +See how to style the accordion according to your brand guidelines. |
| 86 | + |
| 87 | +## Accessibility |
| 88 | + |
| 89 | +This component adheres to WAI-ARIA guidelines, ensuring all users can interact with it effectively. Keyboard navigation is fully supported. |
| 90 | + |
| 91 | +## Contributing |
| 92 | + |
| 93 | +We welcome contributions! To contribute: |
| 94 | + |
| 95 | +1. Fork the repository. |
| 96 | +2. Create a new branch. |
| 97 | +3. Make your changes. |
| 98 | +4. Submit a pull request. |
| 99 | + |
| 100 | +## License |
| 101 | + |
| 102 | +This project is licensed under the MIT License. See the LICENSE file for more details. |
| 103 | + |
| 104 | +## Releases |
| 105 | + |
| 106 | +To download and check the latest releases, visit the [Releases section](https://github.com/vuhuuu11/react-accordion/releases). |
| 107 | + |
| 108 | + |
| 109 | + |
| 110 | +## Topics |
| 111 | + |
| 112 | +- accordion |
| 113 | +- animated |
| 114 | +- collapsible |
| 115 | +- component |
| 116 | +- customization |
| 117 | +- library |
| 118 | +- lightweight |
| 119 | +- motion |
| 120 | +- npm |
| 121 | +- react |
| 122 | +- tailwindcss |
| 123 | +- ui |
| 124 | + |
| 125 | +Thank you for checking out the React Accordion! We hope you find it useful in your projects. |
| 126 | +``` |
0 commit comments