<!---
THIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-PROGRESSIVE-DISCLOSURE/INDEX.JS INSTEAD.
-->
# ProgressiveDisclosure

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

## Installation

```bash
npm i boundless-progressive-disclosure --save
```

Then use it like:


```jsx
/** @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](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components:

```bash
npm i boundless --save
```

the ES6 `import` statement then becomes like:

```js
import { ProgressiveDisclosure } from 'boundless';
```


## Props

> Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/ProgressiveDisclosure).

### Required Props

There are no required props.


### Optional Props

- __`*`__ &middot; any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes)

  Expects | Default Value
  ---     | ---
  `any` | `n/a`

- __`children`__ &middot; 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`__ &middot; any valid HTML tag name

  Expects | Default Value
  ---     | ---
  `string` | `'div'`

- __`expanded`__ &middot; controls the ProgressDisclosure "expanded" state declaratively

  Expects | Default Value
  ---     | ---
  `bool` | `false`

- __`onExpand`__ &middot; called when the content is shown; not called on initial render

  Expects | Default Value
  ---     | ---
  `function` | `() => {}`

- __`onHide`__ &middot; called when the content is hidden; not called on initial render

  Expects | Default Value
  ---     | ---
  `function` | `() => {}`

- __`toggleComponent`__ &middot; any valid HTML tag name

  Expects | Default Value
  ---     | ---
  `string` | `'div'`

- __`toggleContent`__ &middot; 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`__ &middot; 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](https://github.com/enigma-io/boundless/blob/master/variables.styl).

```stylus
// 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](https://github.com/enigma-io/boundless/blob/master/variables.styl).