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} />
    );
}