Components
Structure
Accordion

Accordion

Accordion

Editable Example

import { Accordion } from "@wfp/react";

() => {
  return <Accordion />;
};
PropDefaultDescriptionValue

transition

TransitionProp
–

The transition behavior for the accordion. It can take a TransitionProp type which specifies the type of transition.

transitionTimeout

number |{ enter?: number; exit?: number; }
–

Set the timeout duration for transitions. It uses the 'timeout' type from TransitionOptions to specify the duration in milliseconds.

className

string
–

data-testid

string |number
–

AccordionItem

Editable Example

import { AccordionItem } from "@wfp/react";

() => {
  return <AccordionItem />;
};
PropDefaultDescriptionValue

header

NodeOrFunc
–

Either a React node or a function that returns a React node. This property defines the content of the accordion item's header.

children

NodeOrFunc
–

Can be either a React node or a function that returns a React node. This property defines the main content of the accordion item.

headingTag

"h1" |"h2" |"h3" |"h4" |"h5" |"h6"
–

Specifies the HTML tag to be used for the heading element of the accordion item. It can be any of the heading tags from 'h1' to 'h6'.

headingProps

ItemElementProps<HTMLHeadingElement>
–

Properties to be passed to the heading element of the accordion item. It extends from ItemElementProps which includes standard HTML attributes and a ref.

buttonProps

ItemElementProps<HTMLButtonElement>
–

Properties to be passed to the button element within the accordion item. It extends from ItemElementProps which includes standard HTML attributes and a ref.

contentProps

ItemElementProps<HTMLDivElement>
–

Properties to be passed to the content container element of the accordion item. It extends from ItemElementProps which includes standard HTML attributes and a ref.

panelProps

ItemElementProps<HTMLDivElement>
–

Properties to be passed to the panel element inside the content container of the accordion item. It extends from ItemElementProps which includes standard HTML attributes and a ref.

itemKey

string |number
–

initialEntered

boolean
–

disabled

boolean
–

className

ClassNameProp<Readonly<{ status: TransitionStatus; isMounted: boolean; isEnter: boolean; isResolved: boolean; }>>
–

data-testid

string |number
–

AccordionProvider

ControlledAccordion

withAccordionItem

On this page

References