Skip to content

movcmpret/react-animated-text-builders

Repository files navigation

react-animated-text-builders

A ReactJS library to animate an appearing text.

NPM JavaScript Style Guide

Demo

gif

gif

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

About

A ReactJS library to animate an appearing text.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published