Skip to content
⚛ A custom React hook generating crypting text effect.
TypeScript JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src
.editorconfig
.gitignore 👻 Jan 30, 2020
LICENSE 👻 Jan 30, 2020
README.md
package-lock.json
package.json
rollup.config.js
tsconfig.json
tsconfig.test.json

README.md

Dencrypt example

use-dencrypt-effect

NPM

A custom React hook generating crypting text effect.

Live demo: https://codesandbox.io/s/use-dencrypt-effect-7td0f.

Install

npm install --save use-dencrypt-effect

Usage

import * as React from "react";

import { useDencrypt } from "use-dencrypt-effect";

const values = ["useDencrypt", "Customizable", "React Hook", "Text Effect"];

const Example = () => {
  const { result, dencrypt } = useDencrypt();

  React.useEffect(() => {
    let i = 0;

    const action = setInterval(() => {
      dencrypt(values[i]);

      i = i === values.length - 1 ? 0 : i + 1;
    }, 2000);

    return () => clearInterval(action);
  }, []);

  return <div>{result}</div>;
};

Custom Options

Type: Object.

All parameters are optional.

chars

Type: Array<string>. Default: ["-", ".", "/", "^", "*", "!", "}", "<", "~", "$", "0", "1", "2", "3", "4", "5", "a", "b", "c", "d", "e", "f"];

An array of characters used for the effect. Picked by random.

interval

Type: number. Default: 50.

Number of miliseconds it takes for every animation step (one character).

Other Examples

One character

const options: {
  chars: ["_"]
}

const Example = () => {
  const { result, deEncrypt } = useDeEncrypt(options);

  // ...

Run effect on hover

Live Example | Source Code


This hook is created using create-react-hook.

You can’t perform that action at this time.