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()