reactjs-accordion-ui

reactjs-accordion-ui

reactjs-accordion-ui is a customizable and lightweight ReactJS accordion component that allows you to easily create collapsible sections of content.

Installation

you can download this using npm using below command.

npm install reactjs-accordion-ui

or using yarn

yarn add reactjs-accordion-ui

Note: Please use latest version.

Usage

The required prop is items which is as shown below

import React from 'react';
import {ReactAccordion} from 'reactjs-accordion-ui';

const MyApp = () => {
  const items = [
    { title: 'Section 1', content: 'Content for section 1' },
    { title: 'Section 2', content: 'Content for section 2' },
    { title: 'Section 3', content: 'Content for section 3' },
  ];

  return (
    <ReactAccordion items={items}  />
  );
};

export default MyApp;

you can pass the props defined in option section as per your requirement

import React from 'react';
import {ReactAccordion} from 'reactjs-accordion-ui';

const MyApp = () => {
  const items = [
    { title: 'Section 1', content: 'Content for section 1' },
    { title: 'Section 2', content: 'Content for section 2' },
    { title: 'Section 3', content: 'Content for section 3' },
  ];

  return (
    <ReactAccordion items={items} width={"700px"} headerBackgroundColor={'#0f0'} />
  );
};

export default MyApp;

Options

The ReactAccordion component accepts the following props:

Option	type	Description
items	Array	An array of objects representing the accordion items. Each object should have a title and content property.
width	string	The width of the accordion component.
headerBackgroundColor	string	The background color of the accordion header.
contentBackgroundColor	string	The background color of the accordion content.
offIcon	ReactNode	The icon when the content is not shown
onIcon	ReactNode	The icon when the content is shown

Author

Subramanya KS

License

This project is licensed under the MIT License - see the LICENSE file for details

Changelog

[1.0.8] - 2024-04-03

Fixed

• Fixed the bug that causes null exception.
• Updated README with the customization instructions