lottie reactダウンロードlottie reactソースコードのダウンロード

lottie react

ウェブサイトデータ

v2.4.0

ダウンロード

ロッティ反応

このプロジェクトは、 Reactアプリケーションで簡単に使用できるコンポーネントまたはフックにLottie-Webをラッピングすることにより、最小限の実装でLottieインスタンスを完全に制御できるようにすることを目的としています。

インストール

ピア依存関係がインストールされていることを確認してください： reactとreact-dom 。
注：このライブラリはReactフックを使用しているため、 React -DomとReact-Domの両方に必要な最小バージョンはV16.8.0です。
Yarnを使用して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 -Web用のLottie実装。私たちのプロジェクトはそれに基づいており、このパッケージの背後にあるものや将来どのような機能を期待できるかをよりよく理解するために、それをチェックしてみたいと思うかもしれません。
Lottie -android -AndroidのLottie実装
lottie -ios- iOS用のロッティ実装
Lottie-React-Native-反応ネイティブのロッティ実装
LotTiefiles-アニメーションファイルをお探しですか？ Lottiefilesにはたくさんあります！