rt

react-type

The simplest customizable typewriter component built with React.

Showing:

Popularity

Downloads/wk

2

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

2.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Deprecated!
use react-typeme instead

Readme

react-type

The simplest customizable typewriter component built with React.
3KB gziped (including styling).

Features

✔️ Supports infinitely nested JSX elements.
✔️ Preserves formatting on child elements.
✔️ Allows custom typing and erasing speeds.
✔️ Cycles easily through a list of elements.
✔️ Gives full control on styling with CSS.
✔️ Allows custom cursor.

Demo

--GIF image demo here--

Installation

npm install react-type

Usage

import Type from 'react-type';

<Type>The earth is but one country, and mankind its citizens.</Type>

API

PropsTypeDescription
classNameStringApplies a class style to the element.
cycleBooleanCycle through a list of child elements.
Default: false
cycleTypeStringerase: erases previous element before typing the next element.
reset: resets cursor to start position before typing the next element.
Default: erase
defaultElementString or ElementThe default element to start cycling animation with.
Default: ''
eraseDelayNumberDelay (in ms) before starting to erase characters when cycling.
Default: 2000
onTypingDoneFunctionCallback when typing animation is over.
pauseBooleanControls the start of typing animation.
Default: false
startTypingDelayNumberDelay (in ms) before start of typing.
Default: 0
typingDelayNumberDelay (in ms) before each character typed.
Default: 30
hideCursorDelayNumberDelay (in ms) before hiding the cursor at the end of the typing animation. A negative value will prevent the cursor from hiding.
Default: -1
cursorColorStringThe color of the cursor.
Default: #000
cursorWidthNumberThe width of the cursor in px.
Default: 2

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100