reactypo

Reactypo is a react library that makes it easy to control and animate text.

Usage no npm install needed!

<script type="module">
  import reactypo from 'https://cdn.skypack.dev/reactypo';
</script>

README

Reactypo

Reactypo is a react library that makes it easy to animate text.

Status

npm version

Installation

npm install --save reactypo

Example

Example can be seen here

Basic Usage

import React from 'react'
import { Text, Typo } from 'reactypo'

const App = () => {
  return (
    <Typo>
      <Text>Hello </Text>
      <Text>World!</Text>
    </Typo>
  )
}

export default App

Text component

Renders every char child at a defined pace.

The Text component can be used alone without a Typo component, but the Typo component makes sure every Text is printed one after another.

Props

name type description default
pace? number The pace between two chars in milliseconds 40
whiteSpacePace? number The pace of white spaces to make the text more dynamic in milliseconds 40
pause? number The pause before starting the text in milliseconds 0
block? boolean Defines the container css display rule to 'block' instead of 'inline-block' false
stamp? boolean Displays all the chars at once false
rewind? boolean Prints the chars in the Text backwards false
charClassName? string The className assigned to every printed char undefined
className? string The className of the Text container undefined

Event handlers

name params description
onStart?
  • text:Text The current Text component
Called when the first char is printed
onChar?
  • char:string The current printed char
  • text:Text The current Text component
 Called when a char is printed
onStop?
  • text:Text The current Text component
Called when the last char is printed

Typo Component

Props

Those props will be used by every Text child that don't define them.

name type description default
name? string The name of the typo. Used by the `next` props to order the rendering of Typos random
next? string The name of the next typo to render undefined
pace? number The pace between two chars in milliseconds 40
whiteSpacePace? number The pace of white spaces to make the text more dynamic in milliseconds 40
pause? number The pause before every text in milliseconds 0
first? boolean Defines the typo as the first to launch when its name is in the ̀ next` props of another typo false
stamp? boolean Displays all the chars in every Text at once false
rewind? boolean Prints the chars backwards false
stop? boolean Prevents the Typo from playing false

Event handlers

name params description
onStart?
  • typo:Typo The current Typo component
 Called when the first char is printed
onChar?
  • char:string The current printed char
  • typo:Typo The current Typo component
 Called when a char is printed
onText?
  • text:Text The current Text component
  • typo:Typo The current Typo component
 Called when Text prints its first char
onStop?
  • typo:Typo The current Typo component
 Called when the last char is printed

Static methods

The typo class can manipulate every typo with a name

name params description
play typoName:string The name of the Typo component to play Plays the Typo
stop typoName:string The name of the Typo component to stop Stops the Typo

License

MIT © vivienld