use-dencrypt-effect

 

A custom React hook generating crypting text effect.

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

Install

``bash
npm install --save use-dencrypt-effect
`

Usage

`tsx
import * as React from "react";

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

const Example = () => {
const [value, setValue] = useDencrypt("initialValue");

return

;
};
`

API

$3

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

$3

![](https://github.com/crazko/use-dencrypt-effect/raw/master/docs/example1.gif)

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

// ...
``

$3

Live Example | Source Code