@vcnkit/expansionpanel v0.4.2
VCNKit/ExpansionPanel
@vcnkit/expansionpanel
provides a Expansion Panel component. This component has a header and an icon indicating the current expanded-state. The given content will only be rendered when the panel is expanded.
Installation
NPM
$ npm install --save @vcnkit/expansionpanel
Yarn
$ yarn add @vcnkit/expansionpanel
Usage
A simple expansion panel utilizing local state.
The basic Expansion Panel consists of a header and the content that should be displayed when the panel is expanded.
import * as ExpansionPanel from '@vcnkit/expansionpanel';
const SomeComponent = () => (
<ExpansionPanel.Panel>
<ExpansionPanel.Header>I am an Expansion Panel</ExpansionPanel.Header>
<ExpansionPanel.Content>
This will only be visible when the panel is expanded.
</ExpansionPanel.Content>
</ExpansionPanel.Panel>
)
The above code will render a panel that will toggle the expanded-state when the ExpansionPanel.Header
is clicked on or gets triggered by a keypress.
Setting the default state
The panel is collapsed by default, if you want it to be expanded by default you can simply pass the expanded
-prop to ExpansionPanel.Panel
.
import * as ExpansionPanel from '@vcnkit/expansionpanel';
const SomeComponent = () => (
<ExpansionPanel.Panel expanded>
<ExpansionPanel.Header>I am an Expansion Panel</ExpansionPanel.Header>
<ExpansionPanel.Content>
This will only be visible when the panel is expanded.
</ExpansionPanel.Content>
</ExpansionPanel.Panel>
)
Controlling the ExpansionPanel from another component or state manager
If you want to control the ExpansionPanel's expanded
state from another component or a state manager like Redux, you need to provide an onChange
handler to ExpansionPanel.Panel
and it will stop using local state. When a user clicks on the ExpansionPanel.Header
the onChange
function will be called with the current expanded state. It is up to you to then change the value of the expanded
-prop.
Using the provided <ExpansionPanel.Set> to manage panels.
A simple container component is provided to manage a set of expansion panels easily
import * as ExpansionPanel from '@vcnkit/expansionpanel';
const SomeComponent = () => (
<ExpansionPanel.Set initialExpanded="panel-1">
{ (expanded, toggle) => (
<div>
<ExpansionPanel.Panel
expanded={ expanded === 'panel-1' }
onChange={ () => toggle('panel-1') }
>
<ExpansionPanel.Header>Panel 1</ExpansionPanel.Header>
<ExpansionPanel.Content>Content 1</ExpansionPanel.Content>
</ExpansionPanel.Panel>
<ExpansionPanel.Panel
expanded={ expanded === 'panel-2' }
onChange={ () => toggle('panel-2') }
>
<ExpansionPanel.Header>Panel 2</ExpansionPanel.Header>
<ExpansionPanel.Content>Content 2</ExpansionPanel.Content>
</ExpansionPanel.Panel>
</div>
) }
</ExpansionPanel.Set>
);
Using a different component as icon
The <ExpansionPanel.Header>
component takes an optional icon
-prop. The provided component will be used in place of the "Expand more"-arrow. In order to react to the current expanded state, you can use ExpansionPanel.PanelContext
to retrieve it.
import * as ExpansionPanel from '@vcnkit/expansionpanel';
// Create a component to act as an icon.
const SomeOtherIcon = () => (
<ExpansionPanel.PanelContext>
{ ({ expanded }) => expaned ? <p>Expanded</p> : <p>Not expanded</p> }
</ExpansionPanel.PanelContext>
);
// Inject our own icon into <ExpansionPanel.Header>
const SomeComponent = () => (
<ExpansionPanel.Panel expanded>
<ExpansionPanel.Header icon={ <SomeOtherIcon /> }>I am an Expansion Panel</ExpansionPanel.Header>
<ExpansionPanel.Content>
This will only be visible when the panel is expanded.
</ExpansionPanel.Content>
</ExpansionPanel.Panel>
);