README

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"
    />
)

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.

Usage no npm install needed!