Full Code of adrianmcli/react-reveal-text for AI

Repository: adrianmcli/react-reveal-text
Branch: master
Commit: 3c2d921cdeaa
Files: 18
Total size: 27.3 KB

Directory structure:
gitextract_n9mwmz_s/

├── .eslintrc
├── .gitignore
├── .npmignore
├── .storybook/
│   ├── addons.js
│   └── config.js
├── .travis.yml
├── README.md
├── package.json
├── src/
│   ├── ReactRevealText.js
│   ├── TestWrapper.js
│   ├── index.js
│   └── utils.js
└── stories/
    ├── demo.js
    ├── documentation.js
    ├── examples.js
    ├── index.stories.js
    ├── styles.css
    └── tutorial.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .eslintrc
================================================
{
  "extends": "airbnb",
  "rules": {
    "import/no-extraneous-dependencies": "off",
    "react/forbid-prop-types": "warn",
    "react/jsx-filename-extension": "off",
    "react/no-multi-comp": "warn"
  }
}

================================================
FILE: .gitignore
================================================
node_modules
lib
dist
storybook-static
yarn-error.log
npm-debug.log

================================================
FILE: .npmignore
================================================


================================================
FILE: .storybook/addons.js
================================================
import '@storybook/addon-knobs/register';
import '@storybook/addon-options/register';


================================================
FILE: .storybook/config.js
================================================
import { configure } from '@storybook/react';

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);


================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
  - "6"

================================================
FILE: README.md
================================================
React Reveal Text
---------------
[![npm](https://img.shields.io/npm/v/react-reveal-text.svg)](https://www.npmjs.com/package/react-reveal-text)
[![dependencies](https://img.shields.io/david/adrianmcli/react-reveal-text.svg)](https://github.com/adrianmcli/react-reveal-text/blob/master/package.json)
[![travis](https://img.shields.io/travis/adrianmcli/react-reveal-text.svg)](https://travis-ci.org/adrianmcli/react-reveal-text)
[![bithound](https://img.shields.io/bithound/code/github/adrianmcli/react-reveal-text.svg)](https://www.bithound.io/github/adrianmcli/react-reveal-text)
![license](https://img.shields.io/npm/l/react-reveal-text.svg)

A small react library for animating the revealing of text.

![gif animation](https://cloud.githubusercontent.com/assets/943555/21519497/988cbd5c-ccbb-11e6-9fa0-1911f133de61.gif)

### Demo/Tutorial available here: <a href="#">https://adrianmcli.github.io/react-reveal-text/</a>

The demo page was built with [React Storybook](https://github.com/storybooks/react-storybook).

Features 🎉
---------------

* **Simple** – Just plain ol' CSS transition animations.
* **Zero dependencies** – Keeping it light and lit up!
* **Flexible** – Choose your own easing function and timing.
* **Customizable** – Customize and theme like a regular div.
* **Dynamic** – Intelligent generation of random transition delay numbers.

Getting Started
---------------

1. Install:

  ```
  npm install --save react-reveal-text
  ```

2. Use:

  ```jsx
  <ReactRevealText>WELCOME!</ReactRevealText>
  ```

API
---------------

### Interactive docs with live-editable props [here](https://adrianmcli.github.io/react-reveal-text/?knob-text=AMAZING%20TEXT&knob-show=true&knob-className=my-class-name&knob-style=%7B%22color%22%3A%22tomato%22%2C%22fontSize%22%3A%2224px%22%2C%22lineHeight%22%3A%2236px%22%2C%22textAlign%22%3A%22center%22%2C%22fontFamily%22%3A%22sans-serif%22%2C%22letterSpacing%22%3A%221.2em%22%2C%22paddingLeft%22%3A%221.2em%22%7D&selectedKind=Documentation&selectedStory=Basic%20Properties&full=0&down=1&left=1&panelRight=1&downPanel=kadirahq%2Fstorybook-addon-knobs).

This component has many props that you can manipulate; below is a list of all of them.

Note that the component only re-renders when the `show` property has been changed.

## Basic Properties

- **text** *(string)*  
  You can set the text either by passing in text as children or by using the text property.

- **show** *(boolean)*  
  This prop allows you to control what state the component is in. It allows you to hide or reveal the text.

- **className** *(string)*  
  This prop allows you to set the className for the div surrounding the text.

- **style** *(object)*  
  This prop allows you to pass in styles for the div surrounding the text.

## Transition Properties

Each letter has its own randomly generated delay before its transition begins.

- **transitionTime** *(integer)* [default: 1300]  
  The time it takes for each letter's transition.

- **timingFunction** *(string)* [default: 'linear']  
  The CSS transition-timing-function property. On this page, you are given a dropdown selection, but in practice (and in the sandbox), you can enter in any valid string.

- **delayMin** *(integer)* [default: 200]  
  The minimum allowable delay before the transition for a letter is to begin.

- **delayMax** *(integer)* [default: 1200]  
  The maximum allowable delay before the transition for a letter is to begin.

- **threshold** *(float)* [default: 0.2]  
  The difference between the random numbers generated for each letter compared to the previous letter. Setting this higher will force the delays to be very different between each letter, spreading out the effect. Setting this lower will allow delays to be similar between letters, sometimes creating a chunking effect.

Contributing
---------------

This project was built using my two other tools: [React Build Lib](https://github.com/adrianmcli/react-build-lib) and [React Build Dist](https://github.com/adrianmcli/react-build-dist). These tools are still very early in development, so if you are building these libraries, you may encounter some bugs. PRs and issues are welcomed and encouraged! Should probably add some testing too.


================================================
FILE: package.json
================================================
{
  "name": "react-reveal-text",
  "version": "0.1.1",
  "description": "A small react library for animating the revealing of text.",
  "main": "lib/index.js",
  "homepage": "https://github.com/adrianmcli/react-reveal-text",
  "repository": {
    "type": "git",
    "url": "https://github.com/adrianmcli/react-reveal-text.git"
  },
  "scripts": {
    "test": "npm run lint",
    "start": "npm run storybook",
    "build": "npm run build:lib && npm run build:dist && npm run build-storybook",
    "build:lib": "react-build-lib",
    "build:dist": "react-build-dist --bundle-name ReactRevealText.js",
    "prepublish": "npm run build",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "deploy-storybook": "storybook-to-ghpages",
    "lint": "eslint src stories",
    "lint:fix": "eslint src stories --fix"
  },
  "author": "Adrian Li",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "eslint": "^4.16.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.6.1",
    "react-build-dist": "^0.0.8",
    "react-build-lib": "adrianmcli/react-build-lib",
    "@storybook/addon-actions": "^3.3.11",
    "@storybook/addon-info": "^3.3.11",
    "@storybook/addon-knobs": "^3.3.11",
    "@storybook/addon-links": "^3.3.11",
    "@storybook/addon-options": "^3.3.11",
    "@storybook/addons": "^3.3.11",
    "@storybook/react": "^3.3.11",
    "@storybook/storybook-deployer": "^2.2.0"
  },
  "peerDependencies": {},
  "keywords": [
    "react",
    "react-component"
  ],
  "dependencies": {
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }
}


================================================
FILE: src/ReactRevealText.js
================================================
import React from 'react';
import PropTypes from 'prop-types';

import { getRandoms, randomToDelay } from './utils';

class ReactRevealText extends React.Component {
  constructor(props) {
    super(props);
    this.getDelays = this.getDelays.bind(this);
    this.renderToSpan = this.renderToSpan.bind(this);
  }

  shouldComponentUpdate(nextProps) {
    const showChanged = this.props.show !== nextProps.show;
    const textChanged = this.props.text !== nextProps.text;
    const childrenChanged = this.props.children !== nextProps.children;
    return showChanged || textChanged || childrenChanged;
  }

  getDelays(length) {
    const { threshold, delayMin, delayMax } = this.props;

    // generate random numbers and then convert to delays
    const randoms = () => getRandoms(length, threshold);
    const toDelay = num => randomToDelay(num, delayMin, delayMax);

    return randoms().map(toDelay);
  }

  renderToSpan({ character, delay }, index) {
    const { show, transitionTime, timingFunction } = this.props;
    const style = {
      opacity: show ? '1' : '0',
      transition: `opacity ${transitionTime}ms`,
      transitionDelay: `${delay}ms`,
      transitionTimingFunction: timingFunction,
    };
    return <span key={index} style={style}>{character}</span>;
  }

  renderSpans(text) {
    const textArray = text.split('');

    const delays = this.getDelays(textArray.length);
    const combineWithDelays =
      (character, index) => ({ character, delay: delays[index] });

    return textArray
      .map(combineWithDelays)
      .map(this.renderToSpan);
  }

  render() {
    const { style, className } = this.props;
    const text = this.props.text || this.props.children;

    return (
      <div style={style} className={className}>
        {this.renderSpans(text)}
      </div>
    );
  }
}

ReactRevealText.propTypes = {
  text: PropTypes.string,
  show: PropTypes.bool,
  transitionTime: PropTypes.number,
  timingFunction: PropTypes.string,
  delayMin: PropTypes.number,
  delayMax: PropTypes.number,
  threshold: PropTypes.number,
  style: PropTypes.object,
  className: PropTypes.string,
  children: PropTypes.string,
};

ReactRevealText.defaultProps = {
  transitionTime: 1300,
  timingFunction: 'linear',
  delayMin: 200,
  delayMax: 1200,
  threshold: 0.2,
  text: '',
  className: '',
  style: {},
  show: false,
  children: undefined,
};

export default ReactRevealText;


================================================
FILE: src/TestWrapper.js
================================================
/* eslint-disable react/require-default-props */
import React from 'react';
import PropTypes from 'prop-types';

class TestWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state = {
      show: false,
    };
  }

  onClick() {
    this.setState({ show: !this.state.show });
  }

  render() {
    const { show } = this.state;
    const { children, ...other } = this.props;

    const child = React.Children.only(children);
    const ChildComponent = React.cloneElement(child, { show, ...other });

    return (
      <div>
        { ChildComponent }
        <button onClick={this.onClick}>Toggle Show</button>
      </div>
    );
  }
}

TestWrapper.propTypes = {
  children: PropTypes.element,
};

export default TestWrapper;


================================================
FILE: src/index.js
================================================
module.exports = require('./ReactRevealText').default;


================================================
FILE: src/utils.js
================================================
export const getRandoms = (length, threshold) => {
  const tooClose = (a, b) => Math.abs(a - b) < threshold;

  const result = [];
  let random;

  for (let i = 0; i < length; i += 1) {
    random = Math.random();
    if (i !== 0) {
      const prev = result[i - 1];
      while (tooClose(random, prev)) {
        random = Math.random();
      }
    }
    result.push(random);
  }
  return result;
};

export const randomToDelay = (random, min, max) => {
  const float = random * (max - min);
  return parseInt(float, 10) + min;
};


================================================
FILE: stories/demo.js
================================================
/* eslint-disable react/no-unused-state */
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';

import TestWrapper from '../src/TestWrapper';
import ReactRevealText from '../src/index';

export default () =>
  storiesOf('Demo', module)
    .add('Revealing Text', withInfo({
      propTables: false,
      inline: true,
      source: false,
      text: `
          A simple component for revealing text in a gradual way.
    
          Each letter gets a transition applied to it with a random distribution of delays so that they come into (and out of) view sporadically.
    
          This controlled component is great for landing pages and anywhere you need to show some kind of transition.
    
          Inspired by Adam Schwartz's [Magic of CSS](http://adamschwartz.co/magic-of-css/chapters/6-transitions/).
        `,
    })(() => {
      class Wrapper extends React.Component {
        constructor() {
          super();
          this.state = { show: false };
        }

        componentDidMount() {
          setTimeout(() => {
            this.setState({ show: true });
          }, 2000);
        }

        render() {
          const bgStyles = {
            background: 'linear-gradient(135deg, #723362, #9d223c)',
            padding: '36px',
            paddingTop: '48px',
          };
          const textStyles = {
            color: 'white',
            fontSize: '24px',
            lineHeight: '36px',
            fontFamily: 'sans-serif',
            textAlign: 'center',
            letterSpacing: '1em',
            paddingLeft: '1em', // to compensate for letter spacing
          };
          return (
            <div style={bgStyles}>
              <div style={textStyles}>
                <TestWrapper>
                  <ReactRevealText text="WELCOME TO THE FUTURE" />
                </TestWrapper>
              </div>
            </div>
          );
        }
      }

      return (
        <Wrapper />
      );
    }));


================================================
FILE: stories/documentation.js
================================================
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, text, boolean, object, number, select } from '@storybook/addon-knobs';

import { setOptions } from '@storybook/addon-options';

import TestWrapper from '../src/TestWrapper';
import ReactRevealText from '../src/index';

export default () =>
  storiesOf('Documentation', module)
    .addDecorator(withKnobs)
    .add('Basic Properties', withInfo({
      propTables: false,
      inline: true,
      text: `
        This component has many props that you can manipulate. Please see below and use the knobs panel on the right to experiment.

        Note that the component only re-renders when the \`show\` property has been changed.

        # Basic Properties

        **text** *(string)*  
        You can set the text either by passing in text as children or by using the text property.

        **show** *(boolean)*  
        This prop allows you to control what state the component is in. It allows you to hide or reveal the text.

        **className** *(string)*  
        This prop allows you to set the className for the div surrounding the text.

        **style** *(object)*  
        This prop allows you to pass in styles for the div surrounding the text.
      `,
    })(() => {
      setOptions({ showDownPanel: true });
      return (
        <ReactRevealText
          text={text('text', 'AMAZING TEXT')}
          show={boolean('show', true)}
          className={text('className', 'my-class-name')}
          style={object('style', {
            color: 'tomato',
            fontSize: '24px',
            lineHeight: '36px',
            textAlign: 'center',
            fontFamily: 'sans-serif',
            letterSpacing: '1.2em',
            paddingLeft: '1.2em', // to compensate for letter spacing
          })}
        />
      );
    }))
    .add('Transition Properties', withInfo({
      propTables: false,
      inline: true,
      text: `
        Each letter has its own randomly generated delay before its transition begins.

        # Transition Properties

        **transitionTime** *(integer)* [default: 1300]  
        The time it takes for each letter's transition.

        **timingFunction** *(string)* [default: 'linear']  
        The CSS transition-timing-function property. On this page, you are given a dropdown selection, but in practice (and in the sandbox), you can enter in any valid string.

        **delayMin** *(integer)* [default: 200]  
        The minimum allowable delay before the transition for a letter is to begin.

        **delayMax** *(integer)* [default: 1200]  
        The maximum allowable delay before the transition for a letter is to begin.

        **threshold** *(float)* [default: 0.2]  
        The difference between the random numbers generated for each letter compared to the previous letter.
        Setting this higher will force the delays to be very different between each letter, spreading out the effect.
        Setting this lower will allow delays to be similar between letters, sometimes creating a chunking effect.
      `,
    })(() => {
      setOptions({ showDownPanel: true });
      const timingFnOptions = {
        linear: 'linear',
        ease: 'ease',
        'ease-in': 'ease-in',
        'ease-out': 'ease-out',
        'ease-in-out': 'ease-in-out',
        'step-start': 'step-end',
      };
      const thresholdOptions = {
        range: true,
        min: 0,
        max: 0.5,
        step: 0.1,
      };
      return (
        <TestWrapper>
          <ReactRevealText
            transitionTime={number('transitionTime', 1300)}
            timingFunction={select('timingFunction', timingFnOptions, 'linear')}
            delayMin={number('delayMin', 200)}
            delayMax={number('delayMax', 1200)}
            threshold={number('threshold', 0.2, thresholdOptions)}
          >
            AMAZING TEXT!
          </ReactRevealText>
        </TestWrapper>
      );
    }))
    .add('Sandbox', withInfo({
      propTables: false,
      inline: true,
      text: `
        This page has all the properties for you to play with.

        Note that you can input \`timingFunction\` as a string on the knobs tab.
      `,
    })(() => {
      setOptions({ showDownPanel: true });
      const thresholdOptions = {
        range: true,
        min: 0,
        max: 0.5,
        step: 0.1,
      };
      return (
        <TestWrapper>
          <ReactRevealText
            text={text('text', 'AMAZING TEXT')}
            show={boolean('show', true)}
            className={text('className', 'my-class-name')}
            transitionTime={number('transitionTime', 1300)}
            timingFunction={text('timingFunction', 'linear')}
            delayMin={number('delayMin', 200)}
            delayMax={number('delayMax', 1200)}
            threshold={number('threshold', 0.2, thresholdOptions)}
            style={object('style', {
              color: 'tomato',
              fontSize: '24px',
              lineHeight: '36px',
              textAlign: 'center',
              fontFamily: 'sans-serif',
              letterSpacing: '1.2em',
              paddingLeft: '1.2em', // to compensate for letter spacing
            })}
          />
        </TestWrapper>
      );
    }));


================================================
FILE: stories/examples.js
================================================
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';

import ReactRevealText from '../src/index';

export default () =>
  storiesOf('Examples', module)
    .add('1. Show on load', withInfo({
      propTables: false,
      inline: true,
      source: false,
      text: `
        Here is an example that will reveal the text once the component has been mounted.

        # Source

        ~~~jsx
        class Wrapper extends React.Component {

          constructor() {
            super();
            this.state = { show: false };
          }

          componentDidMount() {
            setTimeout(() => {
              this.setState({ show: true });
            }, 2000);
          }

          render() {
            return (
              <div style={{ border: '1px solid grey', textAlign: 'center' }}>
                <h1>
                  <ReactRevealText show={this.state.show}>
                    WELCOME TO MY SITE
                  </ReactRevealText>
                </h1>
              </div>
            );
          }
        }
        ~~~
      `,
    })(() => {
      class Wrapper extends React.Component {
        constructor() {
          super();
          this.state = { show: false };
        }

        componentDidMount() {
          setTimeout(() => {
            this.setState({ show: true });
          }, 2000);
        }

        render() {
          return (
            <div style={{ border: '1px solid grey', textAlign: 'center' }}>
              <h1>
                <ReactRevealText show={this.state.show}>
                  WELCOME TO MY SITE
                </ReactRevealText>
              </h1>
            </div>
          );
        }
      }

      return (
        <Wrapper />
      );
    }))
    .add('2. Show only on hover', withInfo({
      propTables: false,
      inline: true,
      source: false,
      text: `
        Here is an example that will reveal the text only when it is being hovered on top of.

        # Source

        ~~~jsx
        class Wrapper extends React.Component {

          constructor() {
            super();
            this.state = { show: false };
            this.onMouseEnter = this.onMouseEnter.bind(this);
            this.onMouseLeave = this.onMouseLeave.bind(this);
          }

          onMouseEnter() {
            console.log('true');
            this.setState({ show: true });
          }

          onMouseLeave() {
            console.log('false');
            this.setState({ show: false });
          }

          render() {
            return (
              <div
                onMouseEnter={this.onMouseEnter}
                onMouseLeave={this.onMouseLeave}
                style={{ border: '1px solid grey', textAlign: 'center' }}
              >
                <h1>
                  <ReactRevealText show={this.state.show}>
                    WELCOME TO MY SITE
                  </ReactRevealText>
                </h1>
              </div>
            );
          }
        }
        ~~~
      `,
    })(() => {
      class Wrapper extends React.Component {
        constructor() {
          super();
          this.state = { show: false };
          this.onMouseEnter = this.onMouseEnter.bind(this);
          this.onMouseLeave = this.onMouseLeave.bind(this);
        }

        onMouseEnter() {
          this.setState({ show: true });
        }

        onMouseLeave() {
          this.setState({ show: false });
        }

        render() {
          return (
            <div
              onMouseEnter={this.onMouseEnter}
              onMouseLeave={this.onMouseLeave}
              style={{ border: '1px solid grey', textAlign: 'center' }}
            >
              <h1>
                <ReactRevealText show={this.state.show}>
                  WELCOME TO MY SITE
                </ReactRevealText>
              </h1>
            </div>
          );
        }
      }

      return (
        <Wrapper />
      );
    }))
    .add('3. Pretty', withInfo({
      propTables: false,
      inline: true,
      source: false,
      text: `
        A simple example to show off how pretty the effect can look.

        Imagine this with a moving background!

        # Source

        ~~~jsx
        class Wrapper extends React.Component {

          constructor() {
            super();
            this.state = { show: false };
          }

          componentDidMount() {
            setTimeout(() => {
              this.setState({ show: true });
            }, 2000);
          }

          render() {
            const bgStyles = {
              background: 'linear-gradient(135deg, #723362, #9d223c)',
              padding: '36px',
            };
            const textStyles = {
              color: 'white',
              fontSize: '24px',
              lineHeight: '36px',
              fontFamily: 'sans-serif',
              textAlign: 'center',
              letterSpacing: '1em',
              paddingLeft: '1em', // to compensate for letter spacing
            };
            return (
              <div style={bgStyles}>
                <div style={textStyles}>
                  <ReactRevealText show={this.state.show} text="WELCOME TO THE FUTURE" />
                </div>
              </div>
            );
          }
        }
        ~~~
      `,
    })(() => {
      class Wrapper extends React.Component {
        constructor() {
          super();
          this.state = { show: false };
        }

        componentDidMount() {
          setTimeout(() => {
            this.setState({ show: true });
          }, 2000);
        }

        render() {
          const bgStyles = {
            background: 'linear-gradient(135deg, #723362, #9d223c)',
            padding: '36px',
          };
          const textStyles = {
            color: 'white',
            fontSize: '24px',
            lineHeight: '36px',
            fontFamily: 'sans-serif',
            textAlign: 'center',
            letterSpacing: '1em',
            paddingLeft: '1em', // to compensate for letter spacing
          };
          return (
            <div style={bgStyles}>
              <div style={textStyles}>
                <ReactRevealText show={this.state.show} text="WELCOME TO THE FUTURE" />
              </div>
            </div>
          );
        }
      }

      return (
        <Wrapper />
      );
    }));


================================================
FILE: stories/index.stories.js
================================================
import './styles.css';

import demo from './demo';
import tutorial from './tutorial';
import examples from './examples';
import documentation from './documentation';

demo();
tutorial();
examples();
documentation();


================================================
FILE: stories/styles.css
================================================
code {
  font-size: 15px;
  font-weight: 600;
  padding: 2px 5px;
  border: 1px solid #eae9e9;
  border-radius: 4px;
  background-color: #f3f2f2;
  color: #3a3a3a;
}

pre > code {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font-weight: 400;
}

================================================
FILE: stories/tutorial.js
================================================
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, text, boolean, object } from '@storybook/addon-knobs';

import { setOptions } from '@storybook/addon-options';

import TestWrapper from '../src/TestWrapper';
import ReactRevealText from '../src/index';

// const stories = storiesOf('Tutorial', module);
// stories.addDecorator(withKnobs);

export default () =>
  storiesOf('Tutorial', module)
    .addDecorator(withKnobs)
    .add('1. A controlled component', withInfo({
      propTables: false,
      inline: true,
      source: true,
      text: `
        React Reveal Text is a controlled component.

        That means you control its appearance by passing in a prop.
        In this case, it's the \`show\` prop.

        Click the "Knobs" tab on the bottom and try changing the state.
      `,
    })(() => {
      setOptions({ showDownPanel: true });
      return (
        <ReactRevealText show={boolean('show', false)}>
          WELCOME!
        </ReactRevealText>
      );
    }))
    .add('2. Styling your text', withInfo({
      propTables: false,
      inline: true,
      source: true,
      text: `
        ~~~jsx
        <ReactRevealText
          show={true}
          style={myStyleObject}
          className="my-class-name"
        />
        ~~~

        You can style an object by passing in a style object into the \`styles\` prop.

        Or, you can also pass in a string to the \`className\` prop.

        Note that the component only re-renders when the \`show\` prop is changed.
      `,
    })(() => {
      setOptions({ showDownPanel: true });
      return (
        <ReactRevealText
          show={boolean('show', true)}
          style={object('style', {
            fontSize: '24px',
            lineHeight: '36px',
            textAlign: 'center',
            fontFamily: 'sans-serif',
            letterSpacing: '1.2em',
            paddingLeft: '1.2em', // to compensate for letter spacing
          })}
        >
          WELCOME!
        </ReactRevealText>
      );
    }))
    .add('3. Testing with TestWrapper', withInfo({
      propTables: false,
      inline: true,
      text: `
        This library ships with a component to help you develop with React Reveal Text.

        The TestWrapper component renders a button for you to toggle its
        show/hide state, and controls the ReactRevealText \`show\` prop for you.
        Any props you pass in will be passed through to its child.

        Simply import it like this and use it in the way shown below:

        ~~~jsx
        import TestWrapper from 'react-reveal-text/lib/TextWrapper';
        ~~~
      `,
    })(() => {
      setOptions({ showDownPanel: true });
      return (
        <TestWrapper
          text={text('text', 'AMAZING TEXT')}
          style={object('style', {
              color: 'tomato',
              fontSize: '24px',
              lineHeight: '36px',
              textAlign: 'center',
              fontFamily: 'sans-serif',
              letterSpacing: '1.2em',
              paddingLeft: '1.2em', // to compensate for letter spacing
            })}
        >
          <ReactRevealText />
        </TestWrapper>
      );
    }));