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, deEncrypt } = useDeEncrypt(options);
 
  // ...

Run effect on hover

Live Example | Source Code

This hook is created using create-react-hook.