react-text-typist v1.1.8

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:

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