Skip to main content
react-md
Expansion Panel - Installation

# @react-md/expansion-panel

Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.

# Installation

$ npm install --save @react-md/expansion-panel

This package is not super helpful on its own, so it is recommended to also install the following packages:

$ npm install --save @react-md/theme \
    @react-md/typography \
    @react-md/list \
    @react-md/icon

# Usage

Expansion panels are normally rendered within a list of two or more panels. To create such a list, you'll want to use the ExpansionList and ExpansionPanel components and usePanels hook:

12345678910111213141516171819202122232425262728293031323334import React from "react";
import { render } from "react-dom";
import {
  ExpansionList,
  ExpansionPanel,
  usePanels,
} from "@react-md/expansion-panel";

const App = () => {
  const [panels, onKeyDown] = usePanels({
    count: 3,
    idPrefix: "my-panel-group",
  });

  const [panel1Props, panel2Props, panel3Props] = panels;

  return (
    <main>
      <ExpansionList onKeyDown={onKeyDown}>
        <ExpansionPanel {...panel1Props} headerChildren="Panel 1">
          Panel 1 contents...
        </ExpansionPanel>
        <ExpansionPanel {...panel2Props} headerChildren={<span>Panel 2</span>}>
          Panel 2 contents...
        </ExpansionPanel>
        <ExpansionPanel {...panel3Props} headerChildren="Panel 1">
          Panel 3 contents...
        </ExpansionPanel>
      </ExpansionList>
    </main>
  );
};

render(<App />, document.getElementById("root"));