ReactTypeInAndOut

Component to simulate the effect of typing in and typing out of a text

Demo & Examples

Live demo: JRigotti.github.io/react-type-in-and-out

To try it locally: clone this repo, cd into it and build the examples with the following commands:

npm install
npm start

Then open localhost:8000 in a browser.

Installation

You can get ReactTypeInAndOut from NPM and include it in your project with your build tool of preference (such as Browserify, Webpack, etc).

npm install react-type-in-and-out --save

Usage

The minimal usage of this component can be done through passing a list of words you want to rotate. You can also control the typing speed, delays between words and a few otheroptions described in the properties section below.

var ReactTypeInAndOut = require('react-type-in-and-out');
// or
import ReactTypeInAndOut from 'react-type-in-and-out';

<ReactTypeInAndOut
    words{['React', 'type', 'in', 'and', 'out']}
/>

Properties

| Property | Type | Default | Description | |-------------------|---------|-------------------------|--------------------------------------------| | words | Array | [] | The list of words that are going to rotate | | speed | int | 150 | The typing speed of the text | | delayRestart | int | 0 | The interval before the list starts again | | delayStart | int | 0 | The delay before the typing starts | | delayOnWordFinish | int | 0 | The delay at the end of a fully typed word | | showCursor | boolean | true | Show cursor at the end of the text | | startFullWord | boolean | false | Start component will full word displayed | | className | string | 'react-type-in-and-out' | The class attribute of the component |

Notes

• The cursor blinking effect is acquired though css, this project comes with an implementation which you can get at src/ReactTypeInAndOut.css
• className + '__icon' by default 'react-type-in-and-out__icon' is the class of the icon
• className + '__icon--animated' by default 'react-type-in-and-out__icon--animated' is an added class to the icon when the cursor starts blinking
• Speed and delay properties are all in milliseconds

License

MIT (c) 2017 Jean Rigotti.