0.1.32 • Published 6 years ago
@nju33/react-typing v0.1.32
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>;