A tiny typewriter animation React component, simple and powerful.
React-TypeMe is a typewriter animation simulator component built to be simple and powerful. It was created primarily to learn about the awesome React Hooks. It is built as React functional component.
- Extremely lightweight (< 2KB gzipped including styling).
- Create string looping animation.
- Customize where your line breaks.
- Simulate character deletions where necessary.
- Control typing and backspace speeds if desired.
- Use your own cursor character.
- Easily add custom delays.
- Control when to start your typing animation.
- Made solely for React - No external dependencies.
- Storybook implementation examples.
npm install react-typemeimport TypeMe, { LineBreak, Delete } from 'react-typeme';
// Example #1: text passed as children
<TypeMe>The earth is but one country, and mankind its citizens.</TypeMe>
// Example #2: text passed as prop, with a line break
<TypeMe strings={[
'The earth is but one country,',
<LineBreak />,
'And mankind its citizens.'
]} />
// Example #3: text passed as prop, with backspace simulation
<TypeMe strings={[
'The earth is but one country and mankind its people',
<Delete characters={6} />,
'citizens.'
]} />React-TypeMe is completely free to use within your open source or personal project. To use it in a commercial project, please purchase either a single license use or an unlimited license — I'll also gladly help if you encounter any issues / bugs.
Personal or Open Source - FREE!
GPL-3.0 © Oliver Oxenham