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"; state = update: true obfuscate: true ; { const update obfuscate = thisstate; return <div> <button => update ? "Pause" : "Start" </button> <button => obfuscate ? "Reveal" : "Obfuscate" </button> <Baffle = ="!@#$%^&*" = = = = = > !!!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() |