Componente React para recompensar a los usuarios

Este componente de React muestra una máscara de color sólido con la silueta de una imagen y, cuando se activa, realiza un efecto de aparición gradual para revelar la imagen. Además, el componente también reproduce una animación de Lottie.

Alternativamente, se puede pasar un componente como hijo en lugar de una imagen, se aplicarán efectos de transición y animación de Lottie, pero no se mostrará la silueta.

Cómo usarlo:

1. Instalar e importar.

import React from 'react';
import ReactDOM from 'react-dom';
import { Award } from 'react-award';
// Stylesheet
import 'react-award/dist/react-award.css';

2. Defina la ruta a la imagen y animación de Lottie que le gustaría usar.

<Award 
  playOnHover={true} 
  image={'/path/to/award.svg'}
  animation={'/path/to/confetti.json'}
/>

3. Personaliza la animación.

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;
}

Avance:

Ver en GitHub: https://github.com/fedemartinm/react-award