lottie react

Lottie-React

Этот проект предназначен для того, чтобы дать разработчикам полный контроль над экземпляром Lottie с минимальной реализацией путем обертывания Lottie-Web в компонент или крючок, который можно легко использовать в приложениях React .

Установка

1. Убедитесь, что у вас установлены зависимости от сверстников: react и react-dom .

   ПРИМЕЧАНИЕ. Эта библиотека использует крючки React, поэтому минимальная версия, необходимая как для 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 для Интернета. Наш проект основан на этом, и вы можете захотеть проверить его, чтобы лучше понять, что стоит за этим пакетом, или какие функции вы можете ожидать в будущем.
• Lottie -Android - Реализация Lottie для Android
• Lottie -IOIS - Реализация Lottie для iOS
• Lottie-React-Nation
• Lottiefiles - Вы ищете файлы анимации? У Lottiefiles их много!

Лицензия

Lottie-React доступен по лицензии MIT.

Спасибо Дэвиду Пробст -младшему за анимации, используемые в примерах.