Skip to content

deadcoder0904/react-typical

Repository files navigation

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.