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;

you can also give a div to content prop as shown below.

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

const MyApp = () => {
  const items = [
    { title: 'Section 1', content: <div>Hi</div> },
    { 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 titletype(string) and content(type ReactNode) 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.
colapseIcon	ReactNode	The icon display when an accordion item is expanded
expandIcon	ReactNode	The icon content to display when an accordion item is collapsed
id	string	The value represents the id attribute of the ReactAccordion component

Contribution

We welcome contributions! If you'd like to contribute to reactjs-toggleswitch, please follow our Contribution Guidelines.

Author

Subramanya KS

License

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

Changelog

[1.1.1] - 2024-04-12

Added

• Added id prop which represents the id attribute of the ReactAccordion component
• Updated README with the customization instructions and contribution guidelines.