@veeyaainnovatives/accordion

A reusable Accordion component for React applications, built on top of react-bootstrap.

Installation

npm install @veeyaainnovatives/accordion --save

Peer Dependencies

This package requires the following peer dependencies:

• react (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-dom (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-bootstrap (^2.0.0)

Usage

Method 1: Using Items Array (Simple)

import { Accordion } from '@veeyaainnovatives/accordion';

function App() {
  const items = [
    {
      eventKey: 'item-1',
      header: 'First Item',
      body: 'Content for first item'
    },
    {
      eventKey: 'item-2',
      header: 'Second Item',
      body: 'Content for second item'
    }
  ];

  return (
    <Accordion
      items={items}
      defaultActiveKey="item-1"
    />
  );
}

Method 2: Using Children (Full Customization)

import { Accordion, BootstrapAccordion, AccordionItem, AccordionHeader, AccordionBody } from '@veeyaainnovatives/accordion';

function App() {
  return (
    <Accordion defaultActiveKey="0" className="accordion">
      <AccordionItem eventKey="step-1">
        <AccordionHeader>
          <div className="w-100">
            <h1 className="accordian-title">Step 1 - Project Information</h1>
          </div>
        </AccordionHeader>
        <AccordionBody>
          <div className="faq-content">
            <p>Your custom content here</p>
          </div>
        </AccordionBody>
      </AccordionItem>
      
      <AccordionItem eventKey="step-2">
        <AccordionHeader>
          <h1>Step 2</h1>
        </AccordionHeader>
        <AccordionBody>
          <p>More content</p>
        </AccordionBody>
      </AccordionItem>
    </Accordion>
  );
}

Props

Accordion Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | Array | [] | Array of accordion items (when using items array method) | | defaultActiveKey | string\|number\|Array | undefined | Default active accordion item(s) | | className | string | "" | Additional CSS classes for the accordion | | accordionStyle | object | {} | Custom styles for the accordion | | alwaysOpen | boolean | false | Allow multiple items to be open at once | | flush | boolean | false | Remove the default background color, borders, and rounded corners | | onSelect | function | undefined | Callback fired when an accordion item is selected | | children | ReactNode | undefined | Direct children (for full customization) |

Item Object Structure (when using items array)

| Property | Type | Description | |----------|------|-------------| | eventKey | string\|number | Unique key for the accordion item | | key | string\|number | Alternative to eventKey | | header | ReactNode\|string | Header content (or use title) | | title | ReactNode\|string | Alternative to header | | body | ReactNode\|string | Body content (or use content or children) | | content | ReactNode\|string | Alternative to body | | children | ReactNode | Alternative to body | | component | Component | Custom component for Accordion.Item (defaults to BootstrapAccordion.Item) | | headerComponent | Component | Custom component for Accordion.Header (defaults to BootstrapAccordion.Header) | | bodyComponent | Component | Custom component for Accordion.Body (defaults to BootstrapAccordion.Body) | | itemProps | object | Additional props for Accordion.Item | | headerProps | object | Additional props for Accordion.Header | | bodyProps | object | Additional props for Accordion.Body |

Examples

Basic Usage with Items

<Accordion
  items={[
    { eventKey: '1', header: 'Item 1', body: 'Content 1' },
    { eventKey: '2', header: 'Item 2', body: 'Content 2' }
  ]}
  defaultActiveKey="1"
/>

With Custom Styling

<Accordion
  items={items}
  className="custom-accordion"
  accordionStyle={{ marginTop: '20px' }}
/>

Multiple Items Open

<Accordion
  items={items}
  alwaysOpen={true}
  defaultActiveKey={['0', '1']}
/>

Full Customization with Children

import { Accordion, AccordionItem, AccordionHeader, AccordionBody } from '@veeyaainnovatives/accordion';

<Accordion defaultActiveKey="0">
  <AccordionItem eventKey="0">
    <AccordionHeader>
      <div className="w-100">
        <h1 className="custom-title">Custom Header</h1>
      </div>
    </AccordionHeader>
    <AccordionBody>
      <div className="custom-content">
        <p>Fully customized content</p>
      </div>
    </AccordionBody>
  </AccordionItem>
</Accordion>

With JSX in Items

<Accordion
  items={[
    {
      eventKey: '1',
      header: <h2>Custom Header</h2>,
      body: (
        <div>
          <p>Custom body with JSX</p>
          <button>Click me</button>
        </div>
      )
    }
  ]}
/>

License

MIT