https://github.com/noahlemen/baffle-react

🚪 text obfuscation via baffle, as a react component
https://github.com/noahlemen/baffle-react

animation effect javascript obfuscation react-component text

Last synced: 6 days ago
JSON representation

🚪 text obfuscation via baffle, as a react component

• Host: GitHub
• URL: https://github.com/noahlemen/baffle-react
• Owner: noahlemen
• License: mit
• Created: 2017-09-08T02:11:44.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-09T22:17:43.000Z (about 7 years ago)
• Last Synced: 2024-10-30T10:38:33.039Z (16 days ago)
• Topics: animation, effect, javascript, obfuscation, react-component, text
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/baffle-react
• Size: 77.1 KB
• Stars: 6
• Watchers: 0
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# baffle-react

[![CircleCI](https://img.shields.io/circleci/project/github/kedromelon/baffle-react.svg?style=flat-square)](https://circleci.com/gh/kedromelon/baffle-react/)

[![npm](https://img.shields.io/npm/dt/baffle-react.svg?style=flat-square)](https://www.npmjs.com/package/baffle-react)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://prettier.io/)

> [Baffle](https://camwiegert.github.io/baffle/) as a React component

## install

##### via npm

```sh

npm install --save baffle-react

```

##### via yarn

```sh

yarn add baffle-react

```

## use

### example

```jsx

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 (

      


         this.setState({ update: !update })}>

          {update ? "Pause" : "Start"}

        

         this.setState({ obfuscate: !obfuscate })}>

          {obfuscate ? "Reveal" : "Obfuscate"}

        

        

          !!!foo bar baz!!!

        

      

    );

  }

}

```


### 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`](https://camwiegert.github.io/baffle/#options)

`exclude` | `array` | `[" "]` | Character set to be ignored during obfuscation. See [baffle.js `options.exclude`](https://camwiegert.github.io/baffle/#options)

`speed` | `number` | `50` | Frequency (in milliseconds) at which baffle re-obfuscates text while `props.update` is `true`. See [baffle.js `options.speed`](https://camwiegert.github.io/baffle/#options)

`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()`](https://camwiegert.github.io/baffle/#methods)

`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()`](https://camwiegert.github.io/baffle/#methods)