React-animated-text-builders NPM

react-animated-text-builders

A ReactJS library to animate an appearing text.

Demo

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

@infinitebrahmanuniverse/nolb-react-an @everything-registry/sub-chunk-2539

9 months ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago