Skip to content

BraisC/react-text-typist

Repository files navigation

React-Text-Typist

npm npm size npm type definitions npm downloads github last commit github contributors dependency

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

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