use-dencrypt-effect

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, dencrypt } = useDencrypt(options);

  // ...

Run effect on hover

Live Example | Source Code

This hook is created using create-react-hook.