https://github.com/deadcoder0904/react-typical
Typist library made in React with TypeScript support
https://github.com/deadcoder0904/react-typical
react react-typical reactjs typical typist
Last synced: about 2 months ago
JSON representation
Typist library made in React with TypeScript support
- Host: GitHub
- URL: https://github.com/deadcoder0904/react-typical
- Owner: deadcoder0904
- License: mit
- Created: 2020-08-04T08:55:30.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T20:43:39.000Z (over 2 years ago)
- Last Synced: 2025-03-25T13:51:14.328Z (2 months ago)
- Topics: react, react-typical, reactjs, typical, typist
- Language: TypeScript
- Homepage: https://react-typical.vercel.app/
- Size: 1.3 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Typical
> Typist library made in React with TypeScript support by [@deadcoder0904](https://twitter.com/deadcoder0904)
## Highlights
- **Written in TypeScript**
- **Zero dependencies**
- **MIT licensed**
- **Emoji support**
- **Pausing**: pause between steps
- **Looping**: easily loop from any point
- **Humanity**: slightly varied typing speed
## Install
```bash
$ npm install @deadcoder0904/react-typical
```
## Usage
### Basic
```tsx
import React from 'react'
import { ReactTypical } from '@deadcoder0904/react-typical'
const Index = () => (
)
```
### Emoji Support
```tsx
import React from 'react'
import { ReactTypical } from '@deadcoder0904/react-typical'
const Index = () => (
)
```
### Pausing
In order to pause at any point, pass a number of milliseconds to `steps` prop to pause.
```tsx
import React from 'react'
import { ReactTypical } from '@deadcoder0904/react-typical'
const Index = () => (
)
```
### Looping
In order to loop, just pass a number to `loop` prop, for example, if you want to loop 3 times.
```tsx
import React from 'react'
import { ReactTypical } from '@deadcoder0904/react-typical'
const Index = () => (
)
```
Or pass `Infinity` to loop infinitely.
```tsx
import React from 'react'
import { ReactTypical } from '@deadcoder0904/react-typical'
const Index = () => (
)
```
### Default styles
Get the blinking cursor effect by importing `dist/styles.min.css` as follows:
```tsx
import '@deadcoder0904/react-typical/dist/styles.min.css'
```
## API
| property | required | type | example |
| --------- | -------- | ------ | --------------------------------------- |
| `steps` | yes | [] | `['Hello', 1000, 'React Typical', 500]` |
| `wrapper` | no | string | `'p'` or `'div'` |
| `loop` | no | number | `3` or `Infinity` |
## Motivation & Inspiration
I wanted to use a typist library in React with TypeScript but couldn't find any. I found out there was a React Typist library known as [React Typical](https://github.com/catalinmiron/react-typical/) which used [@camwiegert/typical](https://github.com/camwiegert/typical) but both libraries weren't written in TypeScript. So I made this library which just uses the exact same code but in TypeScript & it was too much hassle to convert it into TypeScript. 10/10 wouldn't recommend.