When using an expansion panel, you'll normally have a list of two or more in a
list to dynamically show content as needed. Each
expandedprop to determine if the content is currently expanded and visible
onExpandedClickprop to toggle the
headeror a custom implementation with
usePanels hook provided by this package will help generate these props for
usePanels hook requires an
idPrefix to generate unique ids for each
panel and a
count for the total number of panels to generate props for. The
hook will also provide an
onKeyDown event handler as the second item in the
returned array which should be passed to a parent DOM element (normally an
ExpansionList). When the
onKeyDown handler is attached, the user can now
quickly jump from panel header to panel header with the up and down arrow keys
or to the first and last panels with the home and end keys.
Check out simple example below to see how these are used together.
As shown in the first example, the default behavior of
usePanels is to only
allow one panel to be expanded at a time as well as not expanding any panels by
default. Luckily, this is all configurable with different options available to
this hook. Use the playground below to see what how the different configuration
ExpansionPanel can also be used on its own as a "reveal" type of component.
Depending on your preference, you can still use the
usePanels hook with a
count set to
1 to generate the props and state for you. Otherwise, you'll
just need to provide the props on your own.
The example below will show two examples of using the
usePanels hook as well
as just providing your own props.