Компонент React для вознаграждения пользователей

Этот компонент React отображает сплошную цветную маску с силуэтом изображения, а при срабатывании выполняет эффект постепенного появления, раскрывая изображение. Кроме того, компонент воспроизводит анимацию Лотти.

Альтернативно, компонент можно передать как дочерний компонент вместо изображения, будут применены эффекты перехода и анимация Лотти, но силуэт отображаться не будет.

Как это использовать:

1. Установите и импортируйте.

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

2. Определите путь к изображению и анимации Lottie, которые вы хотите использовать.

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

3. Настройте анимацию.

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

Предварительный просмотр:

Посмотреть на GitHub: https://github.com/fedemartinm/react-award .