A custom React hook generating crypting text effect.
Live demo: https://codesandbox.io/s/use-dencrypt-effect-7td0f.
npm install --save use-dencrypt-effect
import * as React from "react";
import { useDencrypt } from "use-dencrypt-effect";
const values = ["useDencrypt", "Customizable", "React Hook", "Text Effect"];
const Example = () => {
const { result, deEncrypt } = useDeEncrypt();
React.useEffect(() => {
let i = 0;
const action = setInterval(() => {
deEncrypt(values[i]);
i = i === values.length - 1 ? 0 : i + 1;
}, 2000);
return () => clearInterval(action);
}, []);
return <div>{result}</div>;
};
Type: Object
.
All parameters are optional.
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.
Type: number
. Default: 50
.
Number of miliseconds it takes for every animation step (one character).
const options: {
chars: ["_"]
}
const Example = () => {
const { result, deEncrypt } = useDeEncrypt(options);
// ...
This hook is created using create-react-hook.
Author: crazko
Official Website: https://github.com/crazko/use-dencrypt-effect
#reactjs #javascript