crazko / use-dencrypt-effect

A custom React hook generating crypting text effect.

use-dencrypt-effect's Issues

infinite loop

Hi,
I'm new to react. I don't know how to run this hook.
Just I have used this as it. But the text effect is not running infinitely. Can you please help with this problem?
The effect is running only one.

Starts with Empty Text

As the method loads, the page is blank, so it looks as if it hangs. Is there a way to begin with some default text from the array before the animation begins?

Thanks

Callback if animation finished

Hi, and thank you for this really nice animation plugin.

My question (or feature request) is:

• Is there a way to get a callback if the animation is finished?
  (I have a navigation when I hover, the animation starts. But when I leave the NavItem, I wanna be able to finish the animation. Maybe you can suggest me an solution: Here is a codesandbox to show my problem: https://codesandbox.io/s/use-dencrypt-effect-m0cez?file=/src/index.js:304-395

thank you in advance

'useDeEncrypt' is not defined

Installed with yarn add use-dencrypt-effect, literally copied usage example and got error 'useDeEncrypt' is not defined no-undef.

import { useDencrypt } from "use-dencrypt-effect"; is grayed out.

Wrong package version install

Steps to reproduce

• Create a new react project.
• Run npm install --save use-dencrypt-effect

Expected result
Package.json has use-dencrypt-effect with version 1.0.1 and uses the same API as the examples.

Actual result
Package.json has use-dencrypt-effect with version 2.0.0-rc.1 and uses the different API than the examples.

Examples don't work out the box

Your example code doesn't work in my project. Various spellings of dencrypt, deEncrypt etc.

Here is one that worked for me

import React, { useEffect } from 'react';
import { useDencrypt } from 'use-dencrypt-effect';

const values = ['test', 'test2'];

function TextTest() {
  const { result, dencrypt } = useDencrypt();
  useEffect(() => {
    let i = 0;

    const action = setInterval(() => {
      dencrypt(values[i]);

      i = i === values.length - 1 ? 0 : i + 1;
    }, 2000);

    return () => clearInterval(action);
  }, []);

  return (
    <div>
      <h1>{result}</h1>
    </div>
  );
}

export default TextTest;