react-animated-text-builders
v1.1.2
Published
A ReactJS library to animate an appearing text.
Downloads
96
Readme
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