maxeth / react-type-animation Goto Github PK

Thank you for your work on this package!

I've followed your accessibility guide and added a aria-label. If we add an aria-label also a role should be added:

So I suggest to also accept a role prop and forward it to the created wrapping element.

Hello,

Awesome package btw. I was wondering if there's a way of having initial text there, instead of initially having nothing and typing it out the first time.

Can we remove the prop-types peer dependency? Doesn't seem to be used at all in the package

Hey,

This doesn't seem to be working with SSR in Next.js v13.

Error: useRef only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

The workaround is to create a wrapper component with the following:

'use client';
export * from 'react-type-animation';

but it's less than ideal.

I am changing the sequence prop dynamically as I change the language in my page, but the animation keeps playing, not reflecting the language change.

Is there a way to fix this?

As it is mentioned in the Usage Notes

Immutability
Due to the nature of the animation, this component is permanently memoized, which means that the component never re-renders unless you hard-reload the page, and hence props changes will not be reflected.

I'm using this nice package in a website where switching between languages is involved so I needed to change sequence on language change.

I made this workaround to achieve this and I hope this helps someone who is looking for something similar.

function useOnChangeSequence(sequence: any[]) {
	const [animationFlag, setAnimationFlag] = useState(false);

	// Put down flag when sequence changed
	useEffect(() => setAnimationFlag(false), [sequence]);

	useEffect(() => {
		if (animationFlag) return; // Avoid infinite loop
		setAnimationFlag(true); // raise flag to trigger animation
	}, [animationFlag]);

	return animationFlag;
}

And I'm using it like so:

const TypeWriterText: FC<ITypeWriterTextProps> = ({
	sequence,
	wrapper = 'p',
	onFinish,
	cursor = true,
	className = '',
}) => {
	const animationFlag = useOnChangeSequence(sequence);
	return (
		animationFlag ?
			<TypeAnimation
				cursor={cursor}
				sequence={sequence}
				speed={30}
				wrapper={wrapper}
				className={className}
			/>
			: null
	);
};

Could you please add export to all your types in dist -> index.d.ts?
It will be helpfull for typescript projects 👍

Have a great day and thank you for this project!

How do I change only the cursor color? Could please add a "cursorClassName" field?

Hi, I tried setting speed to 1 but I find it too fast. How can I slow it down more?

<TypeAnimation
  sequence={[
    "hello world, this is kinda cool",
    2000,
    "magical machines they are; computers",
    2000,
    "down with the tyrants",
    2000,
  ]}
  preRenderFirstString={true}
  splitter={(text) => text.split(" ")}
/>

The above code causes the library to not animate to the next string.

1. Splitting each character via splitter={(text) => text.split("")} works just fine though.
2. Oddly enough, if I'm splitting by spaces and set preRenderFirstString={false} then it also works just fine.

1st iteration in chrome

1st iteration in firefox

and here is the code

<Typing.Reset count={1} delay={500} />Shopping<Typing.Delay ms={1000} /><Typing.Backspace count={20} />

how can i avoid the back space effect instead come to new line

in the docs, it says if you use useRef hooks, it has generic type from react createRef and the default is HTMLSpanElement. however when I do it the callback function way, the parameter has the type of any and it seems like I cannot infer the type to anything including HTMLElement as it doesnt satisfy the Sequence type in <TypeAnimation /> props.

Is there any way I can infer the parameter type from any to any HTMLElement in callback function?

In this section "Useful css rules for inline wrappers"

There is a missing comma after the
width: '300px'
see below

style={{ height: '200px', width: '300px' border: 'solid 1px rgb(0,0,0)' }}

also
awesome library, great job!

I'm using this library in the Next.js project. I store data in an object which has different languages.

I have a language switcher in this project, but when I switch the language, the sequence won't change into the correct string array.

const typingAnimationObj = {
  tw: ['XXX', nextTextDelay, 'XXX', nextTextDelay],
  cn: ['XXX', nextTextDelay, 'XXX', nextTextDelay],
  en: ['XXX', nextTextDelay, 'XXX', nextTextDelay],
};

<TypeAnimation
  sequence={typingAnimationObj[lang]}
  ...
/>

Is this a bug or just my problem? Can someone help me?

imagine you have a long piece of text that your are typing with the animation. When the div overflows, the view currently will not follow the text, instead it stays in its current position and you have to scroll down to catch up with the latest text written. How can I get it so that text is being followed?

Thanks for you work on this. I'm not sure if this is a duplicate of #12 but is there any way of adding line breaks? I'm working on rendering a paragraph and using <br/> or \n does not work. Thanks.

Great library!
As you support similar feature like chatgpt I was wondering if we can also support a code syntax highlighter when the text is code.

Tried to make it working with the syntax-highlighter but unfortunately it's not something doable.

Any hints how to do this?

pm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0 || ^17.0.0" from [email protected]

Doesn't work with react 18 and henceforth will break for future versions

I was looking for a way to simulate a command line style animation and came across this package that looks great, however the cursor uses the standard vertical line style, it would be a very useful addition to be able to specify either a block or underscore cursor as well.

Looking at the code it seems like an update to the cursor prop to accept a specified type instead of a boolean would be the way to go, but I'm not too familiar with Typescript.

I'd like to use this as the placeholder of a textarea. Obviously it'd need to be text only, and not a whole component.

Maybe it can be split into a hook, so the text can be used as the placeholder prop in a Textarea element?

it was on edge browser, not sure if it is browser related

Hi,
using with NextJS, Typescript, but getting this error in VS CODE:

Type '{ cursor: true; sequence: (string | number)[]; wrapper: string; repeat: number; }' is not assignable to type 'IntrinsicAttributes & TypingProps'.
  Property 'sequence' does not exist on type 'IntrinsicAttributes & TypingProps'.

However, the project is working and rendered fine on the front but it's just showing me this error on VS Code.

Packages:
"react-type-animation": "^1.1.3"

DevDep:
"@types/react-type-animation": "^1.1.0",

I am trying to have multiple animations in a div, problem is that when one is empty it becomes and empty line making the other elements move. how can I prevent this?

Here is a video

Thanks

It would be a nice addition If I could remove the cursor after animation is finished when repeat is not Infinity and an additional prop like omitCursorAfterAnimating and cursor is true.

Nice package.

<TypeAnimation sequence={[> question: ${item.question}, ]} wrapper="p" speed={{ type: "keyStrokeDelayInMs", value: 0.001 }} className='font-secondary' />

Currently after one string is deleted, and the next string got typed immediately.

Any way to pause for a given seconds before typing next string?

When the animation types out emojis and other abstract characters it will do so an unexpected way.

This is because the strings are broken down by array-spreading in typical.ts and there are references to a string's length via String.prototype.length.

See https://github.com/orling/grapheme-splitter for examples of problematic strings.

IMO, the best solution would be to implement a library such as grapheme-splitter to handle the splitting strings and the determining of their lengths.

Animations aren't smooth it delete letters while typing , and shaking

Unsure if this is able to be done but the ability to change the duration of the animation would be great.

Can there be a prop for delaying animation on mount,because i am using this in my hero section and there is already an opacity animation in type animation div

Right now the the animation is done letter by letter.
It would be also nice to have the animation display text word by word so it gives a readability closer to the human one.

I noticed that this package currently has semantic versioning set to ^16.4.1 for react and react-dom. Are there any plans to upgrade this to semantic versioning using 17.x.x anytime soon? The reason I ask is because by not having this, any react project that does uses ^17.0.0 will throw an error when trying to install this package, and it'd be nice to install this without having to use the --force command or legacy peer dependencies.

Hey so I was using the module which i installed from Npm. The module works fabulous with no bugs.. but there is always 3 errors which keep spamming my terminal on saving. Is there any fix for this since I like to keep my terminal clean from Errors.
Version: "react-type-animation": "^2.1.1",

Compiled with warnings.

Failed to parse source map from 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\components\TypeAnimation\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\components\TypeAnimation\index.tsx'

Failed to parse source map from 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\hooks\useEffectOnce.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\hooks\useEffectOnce.tsx'

Failed to parse source map from 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\typical.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\typical.ts'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/react-type-animation/dist/esm/index.es.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\components\TypeAnimation\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\components\TypeAnimation\index.tsx'

WARNING in ./node_modules/react-type-animation/dist/esm/index.es.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\hooks\useEffectOnce.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\hooks\useEffectOnce.tsx'

WARNING in ./node_modules/react-type-animation/dist/esm/index.es.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\typical.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Arinjay\React Apps\articlechatbot\node_modules\react-type-animation\src\typical.ts'

webpack compiled with 3 warnings

It would be very useful to know when they animation is done, or even when each index in sequence is done

Great plugin!
One use case of such a plugin is often to display someone writing code.
We might want to style the text to represent tags, values, attributes, etc... differently.
Or at least if too difficult it would be a great addition to be able to apply a distinct style to each line.

Thanks

Hi, the cursor option allows us to show or hide the cursor when the text is being typed. But when I set the cursor prop's value from a state and change the state at the end of animation, it doesn't hide the cursor.

For example, I want the cursor to show up when the text is being typed but hide it after the typing completes. I guess the cursor show and hide needs to be updated using a useEffect when the prop changes from the consuming component. See below code for understanding.

type typingTextType = string | number;

interface TypingAnimationProps {
  typingText: typingTextType;
  onComplete?: Function;
  hideCursorOnEnd?: boolean;
}

export const TypingAnimation: React.FC<TypingAnimationProps> = (props) => {
  const { typingText, onComplete, hideCursorOnEnd = false } = props;
  const [hideCursor, setHideCursor] = useState(false);

  return (
    <TypeAnimation
      sequence={[
        typingText,
        1000,
        () => {
          onComplete && onComplete(true);
          hideCursorOnEnd && setHideCursor(true);
        },
      ]}
      wrapper="span"
      className={cssClasses.APP_TYPING_ANIMATION}
      cursor={!hideCursor}
      speed={1}
      omitDeletionAnimation
    />
  );
};

One or two properties can be added to accept static string which can be appended before or after animated string.

example use case:

For: Developers
For: Freelancers
For: Professionals

In this case, I would like to fix For: and animated rest of the string.

Basically as the title says. As with other type-animation libraries, I am not sure why the default is to delete the text automatically, or at the very least, why there is no option to turn the deletion option off altogether. When first viewing the documentation, I had hoped that omitDeletionAnimation prevented the deletion from taking place, not simply removed the animation of the deletion. Adding in a parameter to prevent text deletion altogether would be very much appreciated.

how can I make it type out HTML elements? I want to change the color of (for example) the first two letters to black and the next two to red.

It works fine on desktop, and even in the responsive design dev tools with a mobile phone selected. But when I open up the same link on my iPhone the text animation will leave little text colored dots on the screen and not clear them away. You can see what I mean by opening up this link with a smart phone: https://bug-tracker-2.netlify.app/sign-in

Is it possible to provide one button like "Stop generating", and when the user will click on this button then text-generating animation will stop
If there is no such kind of functionality in this package, then any idea how we can do this?
It will really helpful to me, apart from that this package is good for text animation
Thanks

Basically as the title says. As with other type-animation libraries, I am not sure why the default is to delete the text automatically, or at the very least, why there is no option to turn the deletion option off altogether. When first viewing the documentation, I had hoped that omitDeletionAnimation prevented the deletion from taking place, not simply removed the animation of the deletion. Adding in a parameter to prevent text deletion altogether would be very much appreciated.

I'm not sure if this is possible because it might have been built differently, but I was looking for something like the fixed prop from react-typewriter. Something that would pre-render the space needed for the text to prevent items below the typing component to get pushed down in the case of multiline text (or even single line text - there is a small tilt from 0 lines to 1 line).

for example when the text is rendering till the end, how i know that the text is rendered ?

It would be great to implement events like this:

<TypeAnimation
    onSequenceStepEnd={(sequence: Sequence, sequenceIdx: number) => {
    // make something when animation sequence step completes
    }
    onSequenceEnd={(sequence: Sequence) => {
    // make something when entire animation sequence ends
    }
} />

Use case:
In my project, I have a cyclic animation of search terms rotating in mock search input. The animation of search term rotation implemented with TypeAnimation component. After each search term change, I change the content below the input. Since there is no way to hook into animation events, I had to implement this behavior with setTimeouts which I had to calculate by summing the animation durations based on typing speed, terms character lengths, and delays in the sequence. The solution turned out quite verbose and does not always perfectly align with the animation timing.