React-Text-Typist

A simple React component to create typing animations with multiple sentences.

I you need a typing effect on your app this package may be what you need :)

Install

npm install react-text-typist --save

Demos

Demo Website

Basic Usage

import React from 'react';
import Typist from 'react-text-typist';

export default App() => {
    return (
      <Typist sentences={['First Sentence', 'Second Sentence', 'Third Sentence']} loop={false} />
    );
}

Props

Typist accepts some props to customize the component behaviour:

Property	Type	Default	Description	Required
sentences	string[]		Array of sentences to type	yes
className	string		Classname to customize component	no
cursorClassName	string		Classname to customize cursor	no
cursorBlinkSpeed	string	700 (ms)	Duration of cursor blink animation	no
cursorColor	string		Color of cursor	no
cursorSmooth	boolean	false	Cursor smooth animation	no
showCursor	boolean	true	Hide or show cursor	no
typingSpeed	number	80 (ms)	Typing speed (ms between each character)	no
deletingSpeed	number	30 (ms)	Deleting speed (ms between each character)	no
pauseTime	number	1000(ms)	Pause between sentences	no
startDelay	number	0(ms)	Delay before start typing	no
cursorDelay	number	same as startDelay	Delay before showing cursor for first time	no
loop	boolean	true	Choose if you want infinite loop	no
style	CSSProperties	{}	Inline CSS to apply to the component	no
defaultText	string	''	Default text to render, useful with SSR	no
onTypeFinish	Function		Callback when finished typing	no

Customization

You can apply your own class to the text and the cursor using the 'className' prop. Also you can select the cursor in CSS via the 'typist-cursor' class or you can apply your own class just to the cursor using the 'cursorClassName' prop.

export default App() => {
    return (
      <Typist className={'myTypist'} cursorClassName={'myCursor'} sentences={['First Sentence', 'Second Sentence', 'Third Sentence']} loop={false} />
    );
}

/* Default cursor class */
.typist-cursor {
  font-size: 16px;
  color: red;
}
/* This will apply to text and cursor */
.myTypist {
  font-size: 16px;
  color: red;
}

/* This will apply only to cursor */
.myCursor {
  font-size: 16px;
  color: red;
}

The component is also compatible with libraries like 'styled-components':

import React from 'react';
import Typist from 'react-text-typist';
import styled, { createGlobalStyle } from 'styled-components';

const StyledTypist = styled(Typist)`
  font-size: 4rem;
  color: blue;
`;

export default App() => {
    return (
      <StyledTypist sentences={['First Sentence', 'Second Sentence', 'Third Sentence']} loop={false} />
    );
}