https://github.com/oliverox/React-TypeMe
A tiny typewriter animation simulator React component, simple and powerful.
https://github.com/oliverox/React-TypeMe
Last synced: 8 months ago
JSON representation
A tiny typewriter animation simulator React component, simple and powerful.
- Host: GitHub
- URL: https://github.com/oliverox/React-TypeMe
- Owner: oliverox
- License: gpl-3.0
- Created: 2019-05-07T09:36:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-09-20T08:59:46.000Z (over 6 years ago)
- Last Synced: 2024-11-06T22:49:07.356Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://react-typeme.netlify.com/
- Size: 896 KB
- Stars: 15
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - React-TypeMe
README
# React-TypeMe
[](https://badge.fury.io/js/react-typeme)
A tiny typewriter animation React component, simple and powerful.
## Overview
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.
## Features
* 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.
## Installation
```bash
npm install react-typeme
```
### Usage
```jsx
import TypeMe, { LineBreak, Delete } from 'react-typeme';
// Example #1: text passed as children
The earth is but one country, and mankind its citizens.
// Example #2: text passed as prop, with a line break
,
'And mankind its citizens.'
]} />
// Example #3: text passed as prop, with backspace simulation
,
'citizens.'
]} />
```
## License options
`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!**
[Single Commercial License](https://react-typeme.netlify.com/#license)
[Extended Commercial License](https://react-typeme.netlify.com/#license)
## License
GPL-3.0 © [Oliver Oxenham](mailto:oliver.oxenham+typeme@gmail.com)