@highlight-ui/accordion v5.1.7

@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

Custom types 🔠

Contributing 🖌️

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

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