boundless-progressive-disclosure

ProgressiveDisclosure

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

Installation

npm i boundless-progressive-disclosure --save

Then use it like:

/** @jsx createElement */
 
import { createElement, PureComponent } from 'react';
import ProgressiveDisclosure from 'boundless-progressive-disclosure';
 
export default class ProgressiveDisclosureDemo extends PureComponent {
    render() {
        return (
            <ProgressiveDisclosure
                toggleContent='Click me to learn the truth...'
                toggleExpandedContent='Click me to hide the truth once again...'>
                And now, all is revealed.
            </ProgressiveDisclosure>
        );
    }
}

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';

Props

Note: only top-level props are in the README, for the full list check out the website.

Required Props

There are no required props.

Optional Props

• * · any React-supported attribute

  Expects	Default Value
  any	n/a

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

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

• component · any valid HTML tag name

  Expects	Default Value
  string	'div'

• expanded · controls the ProgressDisclosure "expanded" state declaratively

  Expects	Default Value
  bool	false

• onExpand · called when the content is shown; not called on initial render

  Expects	Default Value
  function	() => {}

• onHide · called when the content is hidden; not called on initial render

  Expects	Default Value
  function	() => {}

• toggleComponent · any valid HTML tag name

  Expects	Default Value
  string	'div'

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

  Expects	Default Value
  any renderable	null

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

  Expects	Default Value
  any renderable	null

• toggleProps

  Expects	Default Value
  object	{}

Reference Styles

Stylus

You can see what variables are available to override in variables.styl.

// Redefine any variables as desired, e.g:
color-accent = royalblue
 
// Bring in the component styles; they will be autoconfigured based on the above
@require "node_modules/boundless-progressive-disclosure/style"

CSS

If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css, based on Boundless's default variables.