maxeth / react-type-animation Goto Github PK
View Code? Open in Web Editor NEWA React typewriter animation based on typical with extended functionality and customization.
Home Page: https://react-type-animation.netlify.app/
License: MIT License
A React typewriter animation based on typical with extended functionality and customization.
Home Page: https://react-type-animation.netlify.app/
License: MIT License
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!
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\Harrison Howard\Documents\Github Repos\Portfolio\harrison-portfolio\node_modules\react-type-animation\src\components\TypeAnimation\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\Harrison Howard\Documents\Github Repos\Portfolio\harrison-portfolio\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\Harrison Howard\Documents\Github Repos\Portfolio\harrison-portfolio\node_modules\react-type-animation\src\typical.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Harrison Howard\Documents\Github Repos\Portfolio\harrison-portfolio\node_modules\react-type-animation\src\typical.ts'
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.
splitter={(text) => text.split("")}
works just fine though.preRenderFirstString={false}
then it also works just fine.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
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.