React Typical
Typist library made in React with TypeScript support by @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
$ npm install @deadcoder0904/react-typicalUsage
Basic
import React from 'react'
import { ReactTypical } from '@deadcoder0904/react-typical'
const Index = () => (
<ReactTypical
steps={['Hello', 'React Typical']}
wrapper="p"
/>
)Emoji Support
import React from 'react'
import { ReactTypical } from '@deadcoder0904/react-typical'
const Index = () => (
<ReactTypical
steps={['💩',1000, '🙈',1000,'💖',1000,'🚀',1000,'👨🎤',1000]}
wrapper="p"
/>
)Pausing
In order to pause at any point, pass a number of milliseconds to steps prop to pause.
import React from 'react'
import { ReactTypical } from '@deadcoder0904/react-typical'
const Index = () => (
<ReactTypical
steps={['Hello', 1000, 'React Typical', 2000]}
wrapper="p"
/>
)Looping
In order to loop, just pass a number to loop prop, for example, if you want to loop 3 times.
import React from 'react'
import { ReactTypical } from '@deadcoder0904/react-typical'
const Index = () => (
<ReactTypical
steps={['Hello', 1000, 'React Typical', 2000]}
loop={3}
wrapper="p"
/>
)Or pass Infinity to loop infinitely.
import React from 'react'
import { ReactTypical } from '@deadcoder0904/react-typical'
const Index = () => (
<ReactTypical
steps={['Hello', 1000, 'React Typical', 2000]}
loop={Infinity}
wrapper="p"
/>
)Default styles
Get the blinking cursor effect by importing dist/styles.min.css as follows:
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 which used @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.