Have ideas to improve npm?Join in the discussion! »

    boundless-progressive-disclosure

    1.1.0 • Public • Published

    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.

    Install

    npm i boundless-progressive-disclosure

    DownloadsWeekly Downloads

    8

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • avatar