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 Example = () => {
  const [value, setValue] = useDencrypt("initialValue");

  return <div onClick={() => setValue("newValue")}>{value}</div>;
};

API

useDencrypt(initialValue?, options?)

Returns a tuple [value, setValue] consisting of an actual value and a method to set a new value. Just like useState() hook.

value

Type: string

Result of the animation.

setValue(newValue)

Sets a value and starts new animation.

Returns a promise which is resolved when animation for newValue ends.

newValue

Type: string

A value used for next animation.

initialValue

Type: string

Optional value that is returned immediately.

options

Type: Object

All parameters are optional.

chars

Type: string
Default: -./^*!}<~$012345abcdef

Characters used for the effect. Picked by random.

interval

Type: number
Default: 50

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

Examples

See ./src/examples directory.

• Custom Characters
• Initial Value
• Loop Through Values
• Use without React hook

One character

const Example = () => {
  const [value, setValue] = useDencrypt({ chars: "_" });

  // ...

Run effect on hover

Live Example | Source Code