react-decode-animation
Version:
Decode effect typing animation for React
67 lines (66 loc) • 2 kB
TypeScript
import React from "react";
import { AllowedCharatersList } from "../CharacterList";
import { DecodeState } from "../hooks/useDecodeAnimation";
import { DecodeAnimationCharacterOptions } from "./DecodeAnimationCharacter";
/**
* Components props for DecodeAnimation
*/
export interface DecodeAnimationProps {
/**
* If True, DecodeAnimation will play once it enters the viewport
*/
autoplay?: boolean;
/**
* Changing the state will start | pause | reset the animation
*/
state?: DecodeState;
/**
* The duration of each character reveal (in Milliseconds)
*/
interval?: number;
/**
* Options for each characters
*/
characterOptions?: DecodeAnimationCharacterOptions;
/**
* The text that will be animated
*/
text: string;
/**
* A list of character types for the encoded text to use, this will not work if customCharacters is in use
*/
allowedCharacters?: AllowedCharatersList;
/**
* Custom characters for the encoded text to use, this will override allowedCharacters
*/
customCharacters?: string;
/**
* onFinish is triggered when the decode animation is finished
*/
onFinish?: Function;
className?: string;
style?: React.CSSProperties;
}
/**
* Animation actions can be controlled via DecodeAnimationRef,
* DecodeAnimationRef can be obtained through useRef
*/
export declare type DecodeAnimationRef = {
/**
* run play() to play the decode animation
*/
play: Function;
/**
* run pause() to stop the decode animation
*/
pause: Function;
/**
* run reset() to pause and reset the decode animation
*/
reset: Function;
};
/**
* Decode effect typing animation for React
*/
declare const DecodeAnimation: React.ForwardRefExoticComponent<DecodeAnimationProps & React.RefAttributes<DecodeAnimationRef>>;
export default DecodeAnimation;