baffle-react

Baffle as a React component

install

via npm

npm install --save baffle-react

via yarn

yarn add baffle-react

use

example

import React, { Component } from "react";
import Baffle from "baffle-react";

export default class Demo extends Component {
  state = {
    update: true,
    obfuscate: true
  };

  render() {
    const { update, obfuscate } = this.state;

    return (
      <div>
        <button onClick={() => this.setState({ update: !update })}>
          {update ? "Pause" : "Start"}
        </button>
        <button onClick={() => this.setState({ obfuscate: !obfuscate })}>
          {obfuscate ? "Reveal" : "Obfuscate"}
        </button>
        <Baffle
          speed={50}
          characters="!@#$%^&*"
          exclude={[" ", "!"]}
          obfuscate={obfuscate}
          update={update}
          revealDuration={1000}
          revealDelay={0}
        >
          !!!foo bar baz!!!
        </Baffle>
      </div>
    );
  }
}

props

prop | type | default | description :--- | :---:| :-----: | :--- children | string || Text to be obfuscated characters | string\|array | "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz~!@#$%^&*()-+=[]{}\|;:,./<>?" | Character set to be used for obfuscation. See baffle.js options.characters exclude | array | [" "] | Character set to be ignored during obfuscation. See baffle.js options.exclude speed | number | 50 | Frequency (in milliseconds) at which baffle re-obfuscates text while props.update is true. See baffle.js options.speed obfuscate | bool | true | When true, text is obfuscated. update | bool | true | While true, obfuscated text updates every props.speed milliseconds. revealDuration | number | 1000 | When props.obfuscate changes from true to false and props.update is true, the duration in milliseconds over which text is revealed. See baffle.js reveal() revealDelay | number | 0 | When props.obfuscate changes from true to false and props.update is true, the delay before revealDuration begins. See baffle.js reveal()