View Source

ProgressiveDisclosure

Hide content until it's needed, with configurable teasers.

Mechanically, hidden disclosure content is not rendered to the DOM until it is needed.

Installation#

npm i --save boundless-progressive-disclosure

ProgressiveDisclosure can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { ProgressiveDisclosure } from 'boundless';

Demo

Click me to learn the truth...
Show Implementation

Props#

Required Props#

There are no required props.

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

children
Expects
any renderable or arrayOf(any renderable) or function
Default Value
null

if a function is passed, it will not be called until the disclosure content is due to be rendered

component
Expects
string
Default Value
'div'

any valid HTML tag name

expanded
Expects
bool
Default Value
false

controls the ProgressDisclosure "expanded" state declaratively

onExpand
Expects
function
Default Value
() => {}

called when the content is shown; not called on initial render

onHide
Expects
function
Default Value
() => {}

called when the content is hidden; not called on initial render

toggleComponent
Expects
string
Default Value
'div'

any valid HTML tag name

toggleContent
Expects
any renderable
Default Value
null

content to be shown next to the expansion toggle when the disclosure is in "contracted" state, e.g. "Show Advanced Options"

toggleExpandedContent
Expects
any renderable
Default Value
null

content to be shown next to the expansion toggle when the disclosure is in "expanded" state, e.g. "Hide Advanced Options"

toggleProps
Expects
object
Default Value
{}
*
Expects
any

any React-supported attribute