Customizable React typing animation component based on typical.
npm install react-type-animationA customizable React typing animation component.
``bash`
npm install react-type-animation
or
`bash`
yarn add react-type-animation
Requires a react and react-dom version of at least 15.0.0.
A live demo and usage examples of the animation can be found at https://react-type-animation.netlify.app/examples.
A common typewriter animation for a landing page would look like this:
`jsx
import { TypeAnimation } from 'react-type-animation';
const ExampleComponent = () => {
return (
// Same substring at the start will only be typed out once, initially
'We produce food for Mice',
1000, // wait 1s before replacing "Mice" with "Hamsters"
'We produce food for Hamsters',
1000,
'We produce food for Guinea Pigs',
1000,
'We produce food for Chinchillas',
1000
]}
wrapper="span"
speed={50}
style={{ fontSize: '2em', display: 'inline-block' }}
repeat={Infinity}
/>
);
};
`
The docs with props, options and common problem solutions can be found at: https://react-type-animation.netlify.app/.
The default wrapper is now 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. Because the TypeAnimation component is memoized and never re-rendered (see above), yet Hot Reload attempts to re-render the component, changes to the TypeAnimation component will not render until you hard-reload the page. Hence, whenever you make changes to the TypeAnimation component, you unfortunately have to reload your page. See https://react-type-animation.netlify.app/options for more details. | Prop | Required | Type | Example | Description | Default | --- instead of : To migrate, add a display: inline-block/block or wrapper="div" to all occurances with unspecified wrapper.sequenceUsage Notes
$3
$3
Props
|-------------------------|----------|--------------------------------------------------------------------|-------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------|--------------------|
| | yes | Array['One', 1000, 'Two', () => console.log("done")] | Animation sequence: [TEXT, DELAY-MS, CALLBACK] | - |wrapper
| | no | string | p,h2,div, strong | HTML element tag that wraps the typing animation | span |speed
| | no | 1,2,..,99 | {type: "keyStrokeDelayInMs", value: number} | 45, {type: "keyStrokeDelayInMs", value: 100} | Speed for the writing of the animation | 40 |deletionSpeed
| | no | 1,2,..,99 | {type: "keyStrokeDelayInMs", value: number} | 45, {type: "keyStrokeDelayInMs", value: 100} | Speed for deleting of the animation | speed |omitDeletionAnimation
| | no | boolean | false, true | If true, deletions will be instant and without animation | false |repeat
| | no | number | 0, 3, Infinity | Amount of animation repetitions | 0 |cursor
| | no | boolean | false, true | Display default blinking cursor css-animation | true |preRenderFirstString
| | no | boolean | false, true | If true, the first string of your sequence will not be animated and initially (pre-)rendered | true |className
| | no | string | custom-class-name | HTML class name applied to the wrapper to style the text | - |style
| | no | object | {fontSize: '2em'} | JSX inline style object | - |ref
| | no | HTMLElement | null | - | - | - |splitter
| | no | (text: string) => Array(str) => new GraphemeSplitter().splitGraphemes(str) | Used for splitting complex characters, see grapheme-splitter for more details | String.split('')` |