Skip to main content

Accordion

v.6.0.1

Installation​

yarn add @mercell/accordion-react

Usage​

To render Accordion in your project you just simply import it

import {
    Accordion,
    AccordionProps,
    AccordionHeader,
    AccordionContent,
} from '@mercell/accordion-react';
Live Editor
Result

Types, definitions, etc.​

AccordionProps
interface AccordionProps {
    id: string;
    isExpanded?: boolean;
    onExpand?: (id: string, isExpanded: boolean) => void;
    mountOnlyOnExpand?: boolean
} & Omit<JSX.IntrinsicElements['button'], 'value'>
NameTypeDefaultRequiredDescription
idstring-yesnecessary to create action
isExpandedbooleanfalsenosetting initial state of the accordion (collapsed or not)
mountOnlyOnExpandbooleanfalsenomount content component only when expanded
onExpandfunctionfalsenocallback function is fired when state change (expand or not)
AccordionHeaderProps
interface AccordionHeaderProps {
    buttonIconClassName?: string;
    buttonIconContent?: string;
    childrenWrapperClassName?: string;
    iconProps?: CarbonIconProps;
} & JSX.IntrinsicElements['button'] &
          Omit<JSX.IntrinsicElements['button'], 'value'> &
          Omit<JSX.IntrinsicElements['button'], 'onClick'>
NameTypeDefaultRequiredDescription
buttonIconClassNamestring-nopassing className property to the button icon tag
buttonIconContentReactNode'Show more'noContent for the text next to the dropdown icon
childrenWrapperClassNamestring-nopassing className property to the children wrapper tag
iconPropsCarbonIconProps-noall possible properties allowed by CarbonIconProps
AccordionContent
AccordionContent has JSX.IntrinsicElements['div'] type.