Description:
This React component displays a solid color mask with the silhouette of an image, and when triggered, it performs a fade-in effect to reveal the image. Additionally, the component also plays a Lottie animation.
Alternatively, a component can be passed as a child instead of an image, transition effects and Lottie animation will be applied but the silhouette will not be displayed.
How to use it:
1. Install & import.
import React from 'react';
import ReactDOM from 'react-dom';
import { Award } from 'react-award';
// Stylesheet
import 'react-award/dist/react-award.css';2. Define the path to the image & Lottie animation you’d like to use.
<Award
playOnHover={true}
image={'/path/to/award.svg'}
animation={'/path/to/confetti.json'}
/>3. Customize the animation.
interface AwardProps {
/**
* The 'source' property of an image. It can be an imported asset or a URL string.
*/
image: string;
/**
* Lottie animation file. It can be an imported asset or a URL string.
*/
animation: string;
/**
* Use this property to define the duration of the transition. It does not affect the duration of the animation.
*/
duration?: number;
/**
* Set to 'true' to play the animation. This is ignored if 'playOnHover' is set to 'true'.
*/
play?: boolean;
/**
* If this is set to 'true', the animation will be triggered when the user moves the mouse over the component.
*/
playOnHover?: boolean;
/**
* Use this property to play only specific segments of the animation
*/
segments?: [number, number];
/**
* To change the mask color.
*/
backgroundColor?: string;
/**
* Set this property to 'true' to show a placeholder effect when the animation is not ready to be displayed.
*/
showPlaceholder?: boolean;
/**
* Animation speed
*/
speed?: any;
/**
* Container styles
*/
style?: CSSProperties;
/**
* Image styles
*/
imageStyle?: CSSProperties;
/**
* Mask styles
*/
maskStyle?: CSSProperties;
/**
* Player styles
*/
playerStyle?: CSSProperties;
/**
* Called when the lottie animation has finished
*/
onComplete?: () => void;
/**
* Children. Use this if you want to replace the image
*/
children: React.ReactNode;
}Preview:
