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-typical

Usage

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.