@bolttech/atoms-accordion NPM

Accordion Component

A simple accordion component for displaying collapsible content.

Installation

Use the package manager npm or yarn to install the component.

npm install @bolttech/frontend-foundations @bolttech/atoms-accordion

yarn add @bolttech/frontend-foundations @bolttech/atoms-accordion

Props

The Accordion component accepts the following properties:

Prop	Type	Description
headerText	`string`	The text to be displayed as the accordion header.
showContent	`boolean`	Controls whether the content is shown or hidden.
contentText	`string`	The text to be displayed as the accordion content.
disabled	`boolean`	Disables the accordion interaction when set to `true`.
icon	`string`	The name of the icon to be displayed next to the header text.
onClick	`function`	Callback function to toggle the `showContent` state.
id	`string`	An optional identifier to differentiate between multiple instances of the accordion (for testing, etc.).

Usage

import React, { useState } from 'react';
import { Accordion } from '@bolttech/atoms-accordion';
import { bolttechTheme } from '@bolttech/frontend-foundations';

const ExampleComponent = () => {
  const [showContent, setShowContent] = useState(false);

  const handleToggleContent = (value) => {
    setShowContent(value);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Accordion headerText="Accordion Header" showContent={showContent} contentText="Accordion Content" icon="expand_more" onClick={handleToggleContent} id="unique-accordion-id" />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;