@highlight-ui/accordion

@highlight-ui/accordion

Installation

Using npm:

npm install @highlight-ui/accordion

Using yarn:

yarn add @highlight-ui/accordion

Using pnpm:

pnpm install @highlight-ui/accordion

In your (S)CSS file:

@import url('@highlight-ui/accordion');

Once the package is installed, you can import the library:

import {
  Accordion,
  AccordionProps,
  AccordionSection,
  Expandable,
  ExpandableProps,
} from '@highlight-ui/accordion';

Performance Tips

Once the package is installed, you can import the library. The Accordion component depends on React DND, which is a relatively heavy dependency. This component's package is tree shakeable, if you do not need the drag-and-drop functionalities you can import the StaticAccordion component instead of the Accordion component.

import { StaticAccordion } from '@highlight-ui/accordion';

If you only need the drag-and-drop functionalities of the component, you can import the DraggableAccordion component:

import { DraggableAccordion } from '@highlight-ui/accordion';

Usage

Standard Accordion

import React, { useState } from 'react';
import { Accordion } from '@highlight-ui/accordion';

export default function AccordionExample() {
  return (
    <Accordion
      sections={
        ({
          key: '1',
          title: 'Title 1',
          content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        },
        {
          key: '2',
          title: 'Title 2',
          disabled: true,
          content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        },
        {
          key: '3',
          title: 'Title 3',
          content: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
        })
      }
    />
  );
}

Accordion with actions

import React, { useState } from 'react';
import { Accordion } from '@highlight-ui/accordion';
import { Button } from '@highlight-ui/button';
import { Input } from '@highlight-ui/input';

export default function AccordionExample() {
  return (
    <Accordion
      sections={[
        {
          key: '1',
          title: 'Title 1',
          actions: (
            <Button variant="emphasized" onClick={() => alert('Hello')}>
              Click me
            </Button>
          ),
          content: (
            <div>
              <Button>A focusable button</Button>
              <Input placeholder="A focusable input" />
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
          ),
        },
        {
          key: '2',
          title: 'Title 2',
          actions: (
            <Button variant="emphasized" onClick={() => alert('Hello')}>
              Click me
            </Button>
          ),
          content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        },
      ]}
    />
  );
}

Props 📜

Accordion

Prop	Type	Required	Default	Description
sections	AccordionSection	Yes		An array of AccordionSection data structure
selectable	boolean	No	false	Should segments be selectable using a checkbox
selectableSections	AccordionSection	No		Indicates the selected checkboxes in sections
mutltiple	boolean	No	false	Should multiple sections remain open
initiallyOpen	AccordionSection	No		The sections which are open by default. In case multiple is set to false, only the first array element will be opened.
onExpansionChange	(section: AccordionSection, isExpanded: boolean, index: number ) => void	No		Callback fired whenever the section opens or closes.
onSelectedSectionsChange	(sections: AccordionSection[]) => void	No		Will be called with each selection change when the selectable prop is true.
dragProps	DragProps<AccordionSection, D>	No		Configuration for drag-and-drop capabilities.

Custom types 🔠

Type	Values	Description
AccordionSection	{key: string, title: React.ReactNode, content: React.ReactNode, actions?: React.ReactNode, disabled? boolean}	Used for a number of section props
DragProps	Provided by the drag-and-drop utility package

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.