lottie-animations/src/index.js

Lottie Animations Library for React

import React from 'react';
import PropTypes from 'prop-types';
import lottie from 'lottie-web';

export default class WebLottie extends React.Component {
    componentDidMount() {
        const {
            options,
            eventListeners,
        } = this.props;

        const {
            loop,
            autoplay,
            animationData,
            rendererSettings,
            segments,
        } = options;

        this.options = {
            container: this.el,
            renderer: 'svg',
            loop: loop !== false,
            autoplay: autoplay !== false,
            segments: segments !== false,
            animationData,
            rendererSettings,
        };

        this.options = { ...this.options, ...options };

        this.anim = lottie.loadAnimation(this.options);
        this.registerEvents(eventListeners);
    }

    componentWillUpdate(nextProps /* , nextState */) {
        /* Recreate the animation handle if the data is changed */
        if (this.options.animationData !== nextProps.options.animationData) {
            this.deRegisterEvents(this.props.eventListeners);
            this.destroy();
            this.options = { ...this.options, ...nextProps.options };
            this.anim = lottie.loadAnimation(this.options);
            this.registerEvents(nextProps.eventListeners);
        }
    }

    componentDidUpdate() {
        if (this.props.isStopped) {
            this.stop();
        } else if (this.props.segments) {
            this.playSegments();
        } else {
            this.play();
        }

        this.pause();
        this.setSpeed();
        this.setDirection();
    }

    componentWillUnmount() {
        this.deRegisterEvents(this.props.eventListeners);
        this.destroy();
        this.options.animationData = null;
        this.anim = null;
    }

    setSpeed() {
        this.anim.setSpeed(this.props.speed);
    }

    setDirection() {
        this.anim.setDirection(this.props.direction);
    }

    play() {
        this.anim.play();
    }

    playSegments() {
        this.anim.playSegments(this.props.segments);
    }

    stop() {
        this.anim.stop();
    }

    pause() {
        if (this.props.isPaused && !this.anim.isPaused) {
            this.anim.pause();
        } else if (!this.props.isPaused && this.anim.isPaused) {
            this.anim.pause();
        }
    }

    destroy() {
        this.anim.destroy();
    }

    registerEvents(eventListeners) {
        eventListeners.forEach((eventListener) => {
            this.anim.addEventListener(eventListener.eventName, eventListener.callback);
        });
    }

    deRegisterEvents(eventListeners) {
        eventListeners.forEach((eventListener) => {
            this.anim.removeEventListener(eventListener.eventName, eventListener.callback);
        });
    }

    handleClick(onClick) {
        // The pause() method is for handling pausing by passing a prop isPaused
        // This method is for handling the ability to pause by clicking on the animation
        console.log('hii123i', this.props)
        alert("Hello! I am an alert box!!");
    }

    render() {
        const {
            width,
            height,
            ariaRole,
            ariaLabel,
            isClickToPauseDisabled,
            title,
            onClick,
        } = this.props;

        const getSize = (initial) => {
            let size;

            if (typeof initial === 'number') {
                size = `${initial}px`;
            } else {
                size = initial || '100%';
            }

            return size;
        };

        const lottieStyles = {
            width: getSize(width),
            height: getSize(height),
            overflow: 'hidden',
            margin: '0 auto',
            outline: 'none',
            ...this.props.style,
        };

        return (
            // Bug with eslint rules https://github.com/airbnb/javascript/issues/1374
            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
            <div
                ref={(c) => {
                    this.el = c;
                }}
                style={lottieStyles}
                onClick={isClickToPauseDisabled ? () => null : onClick}
                title={title}
                role={ariaRole}
                aria-label={ariaLabel}
                tabIndex="0"
            />
        );
    }
}

WebLottie.propTypes = {
    eventListeners: PropTypes.arrayOf(PropTypes.object),
    options: PropTypes.object.isRequired,
    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    isStopped: PropTypes.bool,
    isPaused: PropTypes.bool,
    speed: PropTypes.number,
    segments: PropTypes.arrayOf(PropTypes.number),
    direction: PropTypes.number,
    ariaRole: PropTypes.string,
    ariaLabel: PropTypes.string,
    isClickToPauseDisabled: PropTypes.bool,
    onClick: PropTypes.func,
    title: PropTypes.string,
    style: PropTypes.string,
};

WebLottie.defaultProps = {
    eventListeners: [],
    isStopped: false,
    isPaused: false,
    speed: 1,
    ariaRole: 'button',
    ariaLabel: 'animation',
    isClickToPauseDisabled: false,
    title: '',
};