Variable AccordionConst

Type Declaration

• • (props: AccordionProps): ReactNode

  • A customizable accordion component built on Material-UI's Accordion. Provides expandable/collapsible sections with optional loading states and animations.

    Parameters

    • props: AccordionProps

      The properties for the Accordion component

    Returns ReactNode

    A rendered accordion component

    Component

    Example

    // Basic usage
    <Accordion
      id="my-accordion"
      items={[
        { title: "Section 1", content: <div>Content 1</div> },
        { title: "Section 2", content: <div>Content 2</div> }
      ]}
    />
    
    // With loading icon and default expanded
    <Accordion
      id="loading-accordion"
      items={items}
      showLoadingIcon={true}
      defaultExpanded={true}
      sx={{ maxWidth: '500px' }}
    />
    
    // With custom styling
    <Accordion
      id="styled-accordion"
      items={items}
      className="custom-accordion"
      sx={{
        backgroundColor: '#f5f5f5',
        borderRadius: '8px'
      }}
    />
    Copy

    Note

    For performance optimization in cases of frequent parent re-renders, consider wrapping this component with React.memo at the consumption level.

    See

    • AccordionItem for the structure of individual accordion items
    • https://mui.com/material-ui/react-accordion/