Skip to content

⬅️ Back to Table of Contents

📄 Expander

📊 Analysis Summary

Metric Count
🔧 Functions 1
📦 Imports 6
💠 JSX Elements 6
📐 Interfaces 1

📚 Table of Contents

🛠️ File Location:

📂 packages/website/src/components/layout/Expander.tsx

📦 Imports

Name Source
Collapsible @docusaurus/theme-common
useCollapsible @docusaurus/theme-common
ArrowIcon @site/src/icons/arrow.svg
clsx clsx
React react
styles ./Expander.module.css

JSX Elements

Component Type Props Children
div element className={clsx(styles.expander, props.className)}
button element className={styles.heading}, onClick={toggleCollapsed} ,
ArrowIcon component className={clsx(styles.arrow, !collapsed && styles.expandedArrow)} none
span element className={styles.headerLabel} {props.label}
Collapsible component as="div", collapsed={collapsed}, lazy={false}
div element className={styles.children} {props.children}

Functions

Expander(props: ExpanderProps): React.JSX.Element

Parameters:

  • props ExpanderProps

Returns: React.JSX.Element

Calls:

  • useCollapsible (from @docusaurus/theme-common)
  • clsx (from clsx)
Code 
function Expander(props: ExpanderProps): React.JSX.Element {
  const { collapsed, toggleCollapsed } = useCollapsible({
    initialState: false,
  });

  return (
    <div className={clsx(styles.expander, props.className)}>
      <button className={styles.heading} onClick={toggleCollapsed}>
        <ArrowIcon
          className={clsx(styles.arrow, !collapsed && styles.expandedArrow)}
        />
        <span className={styles.headerLabel}>{props.label}</span>
      </button>
      <Collapsible as="div" collapsed={collapsed} lazy={false}>
        <div className={styles.children}>{props.children}</div>
      </Collapsible>
    </div>
  );
}

Interfaces

ExpanderProps

Interface Code 
export interface ExpanderProps {
  readonly children?: React.ReactNode;
  readonly className?: string;
  readonly label: string;
}

Properties

Name Type Optional Description
children React.ReactNode ✓ not shown
className string ✓ not shown
label string ✗ not shown

Generated by Syntax Scribe