lottie react

Lottie-react

이 프로젝트는 REACT 애플리케이션에서 쉽게 사용할 수있는 구성 요소 또는 후크에 Lottie-Web를 감싸서 최소한의 구현으로 개발자에게 Lottie 인스턴스를 완전히 제어 할 수 있도록하기위한 것입니다.

설치

1. 피어 의존성이 설치되어 있는지 확인하십시오 : react and react-dom .

   참고 : 이 라이브러리는 React Hooks를 사용하고 있으므로 React 및 React-DOM 에 필요한 최소 버전은 V16.8.0 입니다.

2. 원사를 사용하여 lottie-react 설치하십시오

   yarn add lottie-react

   또는 NPM

   npm i lottie-react

용법

구성 요소 사용 (시도해보십시오)

 import React from "react" ;
import Lottie from "lottie-react" ;
import groovyWalkAnimation from "./groovyWalk.json" ;

const App = ( ) => < Lottie animationData = { groovyWalkAnimation } loop = { true } /> ;

export default App ;

후크 사용 (시도해보십시오)

 import React from "react" ;
import { useLottie } from "lottie-react" ;
import groovyWalkAnimation from "./groovyWalk.json" ;

const App = ( ) => {
  const options = {
    animationData : groovyWalkAnimation ,
    loop : true
  } ;

  const { View } = useLottie ( options ) ;

  return < > { View } </ > ;
} ;

export default App ;

? 선적 서류 비치

자세한 내용과 예는 https://lottiereact.com 에서 문서를 확인하십시오.

테스트

yarn test 명령을 사용하여 테스트를 실행하십시오.

보도 보고서

 -----------------------------|---------|----------|---------|---------|-------------------
File                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------------------|---------|----------|---------|---------|-------------------
All files                    |     100 |      100 |     100 |     100 |                   
 components                  |     100 |      100 |     100 |     100 |                   
  Lottie.ts                  |     100 |      100 |     100 |     100 |                   
 hooks                       |     100 |      100 |     100 |     100 |                   
  useLottie.tsx              |     100 |      100 |     100 |     100 |                   
  useLottieInteractivity.tsx |     100 |      100 |     100 |     100 |                   
-----------------------------|---------|----------|---------|---------|-------------------

기부금

질문 이나 제안이 있습니까? 토론 탭을 사용하십시오. 문제가 있습니까? 주저하지 말고 문제 탭에서 문서화하십시오. 우리는 그것을 조사하고 수정하기 위해 최선을 다할 것입니다. 솔루션 이 있습니까? 당신은 풀 요청을 열어서 매우 환영합니다.

? v3 개발 중이며 많은 기능과 개선을 가져올 계획입니다. 그러나 불행히도 현재 모든 관리자는 업무 관련 프로젝트로 매우 바쁘다. v3 지점 아래의 진행 상황을 확인할 수 있습니다. 물론, 당신은 기여하는 것이 좋습니다. :)

프로젝트에 기여하는 데 시간을 투자해 주셔서 감사합니다!

체크 아웃하는 프로젝트

• Lottie -Web- 웹 용 로티 구현. 우리의 프로젝트는 그것에 기반을두고 있으며,이 패키지의 뒤에 무엇이 있는지 또는 향후 어떤 기능을 기대할 수 있는지 더 잘 이해하기 위해 확인하고 싶을 수도 있습니다.
• Lottie -Android- Android 용 Lottie 구현
• Lottie -IOS- iOS 용 Lottie 구현
• Lottie-React-Native- React Native의 Lottie 구현
• Lottiefiles- 애니메이션 파일을 찾고 있습니까? 로트 테일에는 많은 것들이 있습니다!

특허

Lottie-React는 MIT 라이센스에 따라 제공됩니다.

예제에 사용 된 애니메이션에 대한 David Probst Jr에게 감사드립니다.