react에서 lottie 사용하기

1. react-lottie 설치

yarn add react-lottie --save --dev

 

2. 디자이너분께 lottie json 받기

 

3. 아래와 같이 작성

import React from 'react';
import Lottie from 'react-lottie';
import classNames from 'classnames/bind';
import { hot } from 'react-hot-loader/root';
import * as bear from '../../lottie/bear';

const style = require('./index.scss');
const cx = classNames.bind(style);

const lottieOptions = {
  animationData: bear,
  loop: true,
  autoplay: true,
  rendererSettings: {
    preserveAspectRatio: 'xMidYMid slice'
  }
};

const SaveProgress = () => {
  return (
    <div className={cx('save_progress')}>
      <Lottie
        options={lottieOptions}
        isClickToPauseDisabled={false}
        width={ 75 }
        height={ 75 }
      />
    </div>
  );
}

export default hot(SaveProgress);

 

여기까지는 공식문서..

https://www.npmjs.com/package/react-lottie

react-lottie

띠용 에러 발생

다음과 같이 lottie/bear를 require로 import 하면 문제 해결

import React from 'react';
import Lottie from 'react-lottie';
import classNames from 'classnames/bind';
import { hot } from 'react-hot-loader/root';

const bear = require('../../lottie/bear');
// import * as bear from '../../lottie/bear';

const style = require('./index.scss');
const cx = classNames.bind(style);

const lottieOptions = {
  animationData: bear,
  loop: true,
  autoplay: true,
  rendererSettings: {
    preserveAspectRatio: 'xMidYMid slice'
  }
};

const SaveProgress = () => {
  return (
    <div className={cx('save_progress')}>
      <Lottie
        options={lottieOptions}
        isClickToPauseDisabled={false}
        width={ 75 }
        height={ 75 }
      />
    </div>
  );
}

export default hot(SaveProgress);