React Accordion Component

A customizable and animated accordion component for React applications.

Live Demo | GitHub Repository

Installation

npm install react-ts-accordion-component

Usage

import React from 'react';
import { Accordion } from 'react-ts-accordion-component';
import { FaUser } from 'react-icons/fa';

function App() {
	return (
		<Accordion
			title='User Profile'
			icon={<FaUser />}
			theme='light'
			iconPosition='left'
		>
			<p>Manage your user profile settings here.</p>
		</Accordion>
	);
}

export default App;

Props

• title: string (required) - The title of the accordion
• children: ReactNode (required) - The content of the accordion
• icon: ReactNode - An optional icon to display next to the title
• defaultIsOpen: boolean - Whether the accordion is open by default
• onExpand: function - Callback function when the accordion is expanded
• locked: boolean - Whether the accordion is locked (cannot be opened)
• onRenderTitle: function - Custom render function for the title
• theme: 'light' | 'dark' - The color theme of the accordion
• iconPosition: 'left' | 'right' - The position of the icon

Examples

For more examples and a live demo, visit our example site.

License

MIT

Support

If you encounter any issues or have questions, please file an issue on our GitHub repository.