React Component For Rewarding Users

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:

Download Details:

Author: fedemartinm

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/fedemartinm/react-award

License: MIT