react-typing

Typing animation component for React

Install

yarn add @nju33/react-typing

yarn add react @types/react styled-components

Usage

import {Typing, Del, Enter} from '@nju33/react-typing';
// - Typing
// - Del
//     In the text, temporarily display and then erase.
// - Enter
//     Put a line break

// Default setting
Typing.defaultProps.speed = [20, 130]; // Any of the 20 ~ 130
Del.defaultProps.reverseSpeed = 20; // Only 20

// ...

<Typing
  in={false} // When it appears
  cursorAnimation={false} // Optional. Whether cursor element display
  onComplete={this.handleComplete} // Optionals. this is triggered after this animation complete
  speed={[50, 100]} // Optional. Overwrite default setting
>
  Lorem ipsum dolor sit amet, <Del>feugiat ut efficitur id</Del>consectetur adipiscing
  elit.<Enter />
  Ut neque ipsum, vulputate vitae dignissim eu, euismod eget lorem.<Enter />
  Duis ut efficitur mi. Ut vehicula nisl vitae magna maximus, et accumsan dolor pretium.<Enter />
  Etiam <Del>Curabitur vehicula dignissim era</Del>finibus et odio id pellentesque.<Enter />
  Duis fringilla, libero et gravida maximus, nulla dolor posuere quam, interdum
  luctus nisi lectus ac quam.
</Typing>;