ReusableUITR React component for typewriter effect

A lightweight, fully-typed React component for creating a typewriter effect with customizable options.

Demo

Click here for a live demo.

Installation

Install @reusable-ui-tr/react-type-writer-effect with npm:

npm i @reusable-ui-tr/react-type-writer-effect

or with yarn / pnpm:

yarn add @reusable-ui-tr/react-type-writer-effect
pnpm add @reusable-ui-tr/react-type-writer-effect

Usage

Import the TypeWriterEffect component in your React component:

import TypeWriterEffect from "@reusable-ui-tr/react-type-writer-effect";

Then use it:

<TypeWriterEffect
  blinkDuration="2s"
  cursorColor="blue"
  fontFamily="Lucida Console"
  fontSize="20px"
  highlightColor="green"
  text="Hello World!"
  textColor="white"
  textWrapper="p"
  typingSpeed="slow"
/>

Looping

Set loopInterval to make the effect restart automatically after it finishes. The value is the pause before it starts over:

<TypeWriterEffect text="I repeat myself." loopInterval="2s" />

Re-triggering on prop change

The animation runs when the component mounts. If you swap the text at runtime (for example, when changing language) and want it to type out again from scratch, give the component a key tied to that value so React remounts it:

<TypeWriterEffect key={lang} text={tagline} />

Properties

Property Name	Property Type	Usage	Default Value	Required
blinkDuration	String	Blink duration of the cursor in seconds or milliseconds (Example values: '1s', '10ms' etc.)	'1s'	no
cursorColor	String	All CSS legal color values are supported. (Example values: '#00ff00', #00ff0080, rgb(0, 255, 0), rgba(0, 255, 0, 0.3), hsl(120, 60%, 70%), hsla(120, 60%, 70%, 0.3), 'green' etc.)	'black'	no
fontFamily	String	Font family of the text	'Roboto, Arial, sans-serif'	no
fontSize	String	Font size of the text	'16px'	no
highlightColor	String	Highlight (background) color of the text	'transparent'	no
loopInterval	String	Time interval before restarting the effect, in seconds or milliseconds (Example values: '1s', '10ms' etc.). Omit to run once.	undefined	no
showCursorOnFinish	Boolean	Whether the cursor should remain visible (blinking) after the effect finishes.	false	no
text	String	Content of the text to type out	none	yes
textColor	String	All CSS legal color values are supported. (Example values: '#00ff00', #00ff0080, rgb(0, 255, 0), rgba(0, 255, 0, 0.3), hsl(120, 60%, 70%), hsla(120, 60%, 70%, 0.3), 'green' etc.)	'black'	no
textWrapper	String	Type of HTML element used to wrap the text (any valid HTML tag name)	'code'	no
typingSpeed	String	Typing speed. Only these keywords are valid: 'slowest', 'slow', 'normal', 'fast', 'fastest'	'normal'	no

Type note: blinkDuration and loopInterval are typed as a `${number}${"s" | "ms"}` template literal, so TypeScript will accept values like "1s" or "250ms" and flag anything else.

Peer Dependencies

These must be present in your project (any modern React app already has them):

• react (>= 16.8.0)
• react-dom (>= 16.8.0)

License

MIT (c) Semih Ataman