react-animated-text-builders

A ReactJS library to animate an appearing text.

Demo

www.movcmpret.com/demo/animated-text-builders/

Install

npm install --save react-animated-text-builders

Usage

import React, { Component } from 'react'

import { BlinkingCursorTextBuilder } from 'react-animated-text-builders'

class Example extends Component {
  render() {
    return <>
      <BlinkingCursorTextBuilder
      textStyle={{fontWeight :"bold", font : "Times New Roman", fontSize : "18px"}}
      style={{transform: "rotate(-10deg)", marginTop:"10px", marginBottom :"10px"}}
      cursorComponent={<div style={{color : "green"}}> Easy to use!</div>}
      blinkTimeAfterFinish={-1}> Easy! </BlinkingCursorTextBuilder>

      <FloatingLettersTextBuilder
        floatingSpeed={500}
        lettersAppearanceDelay={250}
        animationMaxMargin={"200px"}
        animationMinMargin={"0px"}
        onAnimationFinished={()=> {alert("Animation Finished!")}}
      > Floating Letters </FloatingLettersTextBuilder>
      </>
  }
}

Props

BlinkingCursorTextBuilder

Name	Type	Function	Default
timeout	PropTypes.number	Timeout (in ms) per letter	100
blinkTimeAfterFinish	PropTypes.number	Blinking time in ms after animation	-
cursorStyle	PropTypes.object	Styles to be applied to the cursor div	-
blinkingSpeed	PropTypes.number	Blinking speed in ms	-
cursorComponent	PropTypes.element	Custom cursor component (disables cursorStyle)	-
textStyle	PropTypes.object	Styles to be applied to the (string) child	-
onBlinkingFinished	PropTypes.func	Callback that is fired when the blinking ended.	-

FloatingLettersTextBuilder

Name	Type	Function	Default
children	PropTypes.string.isRequired	Text to be displayed	-
floatingSpeed	PropTypes.number	speed of the CSS floating animation in ms	500
floatingStyle	PropTypes.string	style of the CSS floating animation (FLOATING_STYLE)	FLOATING_STYLE.EASE_IN_OUT
lettersAppearanceDelay	PropTypes.number	the delay between each letter to be displayed	100
letterStyle	PropTypes.object	Style of each letter	{}
letterSpacing	PropTypes.string	Spacing between letters (space-letters are not recognized)	"4px"
animationMinMargin	PropTypes.string	The min/end margin of the animation	"0px"
animationMaxMargin	PropTypes.string	The max/initial margin of the animation	"100px"
onAnimationFinished	PropTypes.func	Function is called after the animation finished	-

License

MIT © movcmpret