react-sulfur-accordion v1.0.2

React Sulfur Accordion

React Sulfur Accordion is a flexible and customizable accordion component for React applications. It allows you to create expandable and collapsible sections to organize and present content efficiently. This README provides an overview of the package, including installation instructions, usage examples, and details about props and features.

Installation

You can install React Sulfur Accordion via npm. Make sure you have npm installed, and then run the following command:

npm install react-sulfur-accordion

Usage

Importing

To use React Sulfur Accordion components in your React application, import them as follows:

import { Accordion, AccordionGroup } from "react-sulfur-accordion";

Basic Example

Here's a basic example demonstrating how to use the Accordion and AccordionGroup components:

import React from "react";
import { Accordion, AccordionGroup } from "react-sulfur-accordion";

function App() {
  return (
    <div>
      <h1>Sulfur Accordion Component</h1>
      <AccordionGroup allowMultiple={false}>
        <Accordion title="Section 1" bgHeader="beige">
          <div>
            <p>This is the content for section 1.</p>
          </div>
        </Accordion>
        <Accordion title="Section 2">
          <p>This is the content for section 2.</p>
        </Accordion>
        <Accordion title="Section 3">
          <p>This is the content for section 3.</p>
        </Accordion>
      </AccordionGroup>
    </div>
  );
}

export default App;

Components

Accordion

The Accordion component represents each individual accordion section. It accepts the following props:

• title (string, required): Title of the accordion section.
• children (node, required): Content of the accordion section.
• isOpen (boolean, required): Indicates whether the accordion section is open or closed.
• onToggle (function, required): Callback function to handle toggle event.
• bgHeader (string): Background color of the accordion header. Defaults to '#f1f1f1'.

AccordionGroup

The AccordionGroup component manages multiple accordion sections. It accepts the following props:

• allowMultiple (boolean): Specifies whether multiple accordion sections can be open simultaneously. Defaults to true.
• children (node, required): Accordion components to be managed by the group.

Example

For more examples and advanced usage, refer to the example directory in the repository.

License

This package is licensed under the MIT License. See the LICENSE file for details.

Issues and Contributions

If you encounter any issues or have suggestions for improvements, please open an issue on the GitHub repository. Contributions are welcome and appreciated!

Credits

React Sulfur Accordion is developed and maintained by Sulfur UI (Janardhan Ykunta).