WUI logo

Accordion

Allows the user to show and hide sections of related content on a page.

version

5.14.0

install

yarn add @welcome-ui/accordion

usage

import { Accordion, useAccordion } from '@welcome-ui/accordion'

About #

Built with Ariakit for a better accessibility 🌈

Usage #

Open at start #

Add defaultOpen options on useAccordion to open at start the accordion

With a custom icon #

Customize the icon with a node element on property icon

Note that the custom icon's size property will be set to small

useAccordion #

We use useDisclosureStore from Ariakit Disclosure for the state of the accordion with the animated flag set to true by default.

Pass options to useAccordion:

  • defaultOpen: e.g. const accordion = useAccordion({ defaultOpen: true })

And the hook returns (among other things):

  • useState('open'): whether the accordion is currently open
  • hide: a function to hide the accordion

Properties #

NameType(s)DefaultRequired
title
string
Element
icon
Element
<RightIcon />
store
DisclosureStore

store from useAccordion()

Packages #

Dependencies #
Peer dependencies #

Previous

Text