Accordion Component

The Accordion component is a flexible and customizable React component that creates expandable/collapsible sections. It's built with TypeScript, providing type safety and easy integration into React projects.

Features

• Customizable header, content, and actions sections
• Option to set default expanded state
• Customizable styles for header, content, actions, and icon
• Custom icon support
• TypeScript support for type safety

Installation

To use the Accordion component in your React application, install it via npm:

npm install @droid-tech/react-ts-accordion

Usage

To use the Accordion component, import it and provide the required children:

import Accordion from "@droid-tech/react-ts-accordion";

const MyComponent = () => {
  return (
    <Accordion>
      <div>Accordion Header</div>
      <div>Accordion Content</div>
      <div>Accordion Actions</div>
    </Accordion>
  );
};

Props

The Accordion component accepts the following props:

| Prop | Type | Required | Default | Description | |-------------------|---------------|----------|---------|----------------------------------------------------| | children | ReactNode[] | Yes | - | Array of ReactNodes for header, content, and actions | | defaultExpanded | boolean | No | false | Whether the accordion is expanded by default | | headerStyle | CSSProperties | No | - | Custom styles for the accordion header | | contentStyle | CSSProperties | No | - | Custom styles for the accordion content | | actionsStyle | CSSProperties | No | - | Custom styles for the accordion actions | | iconStyle | CSSProperties | No | - | Custom styles for the accordion icon | | iconComponent | ReactNode | No | ▼ | Custom icon component |

Children

The Accordion component expects 2 or 3 child elements:

1. The first child is used as the accordion header.
2. The second child is used as the accordion content.
3. The third child (optional) is used as the accordion actions.

Customization

Styles

You can customize the appearance of different parts of the Accordion by passing style objects to the corresponding style props:

<Accordion
  headerStyle={{ backgroundColor: '#f0f0f0', padding: '10px' }}
  contentStyle={{ padding: '20px' }}
  actionsStyle={{ marginTop: '10px' }}
  iconStyle={{ color: 'blue' }}
>
  {/* ... */}
</Accordion>

Custom Icon

You can provide a custom icon component:

<Accordion
  iconComponent={<CustomIcon />}
>
  {/* ... */}
</Accordion>

Behavior

• Clicking on the header toggles the expanded state of the accordion.
• The icon rotates 180 degrees when the accordion is expanded.

Accessibility

The Accordion component uses semantic HTML and can be operated with a keyboard, making it accessible to users relying on assistive technologies.

Conclusion

The Accordion component provides a flexible and customizable way to create expandable/collapsible sections in your React application. With its customization options and TypeScript support, it can easily be integrated into your project to display content in an organized and space-efficient manner. For more information and examples, please refer to the GitHub repository.