Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

text-type-animation-effect-react

gk300043ISC1.2.9

A layout component to create a typewriter typing animation effect for text.

react, typing animation react, typewriter animation effect react, barcelona code school

readme

React typing effect text animation component

A layout component to create a typewriter typing animation effect for text.

Installation

Run npm i text-type-animation-effect-react or yarn add text-type-animation-effect-react in the root of your React project

Usage

In the component where you want to see the animation of typing effect import TextTyper with

import TextTyper from 'text-type-animation-effect-react'

Render passing the props with the text to type, interval (optional) and HTML element to use (optional):

<TextTyper text={textToRender} interval={10} Markup={"code"} />
A layout component to create a typewriter typing animation effect for text

Props

Name Type Default Description
text string '' String text value you want to print. The text which would be rendered with the typing animation effect
interval number 100 Number in millisecond to control the speed of typing, delay between rendering each character in milliseconds
Markaup string span Any valid HTML element to render your text within, like p, h1, span, code, etc...

npm: https://www.npmjs.com/package/text-type-animation-effect-react

Done at Barcelona Code School