react-timelapse

タイムラプス コンポーネント

!サンプルイメージ

$3

- 画像をタイムラプスのように連続で表示させることができます。
- あらかじめ読み込むのでスムーズに再生が可能です。
- 画像はローカル, Urlどちらでも対応しています。
- React Component です。

$3

- Web

$3

- React

$3

1. リポジトリのクローン
``
git clone https://github.com/ototonari/timelapse.git
cd timelapse/example
`

2. yarnを利用する場合
`
yarn install
yarn start
`

(2. npm を利用する場合)
`
npm install
npm run start
`

$3

1. yarnを使う
`
yarn add react-timelapse
`

(1. npmを使う)
`
npm install --save react-timelapse
`

$3

`jsx
import React, { useState } from 'react';
import { sampleImageCreator } from "./lib/Utils";
import { Timelapse } from "react-timelapse"

// たとえばこんな感じ(srcはurlでも可能)
const images = [
{
src: "../public/assets/sample/img0001.jpg"
alt: "sampleImage"
}
]

const App: React.FC = () => {
const [timelapseHandle, setTimelapseHandle] = useState(null)
const startTimelapse = () => {
// 読み込みが終わり次第、再生する場合はこのようにする
setTimelapseHandle(true)
}
return (


);
}

export default App;
`

$3

- リポジトリのディレクトリが以下の用途で利用されます
- npm モジュールの公開
- 動作確認
- 開発環境

`

.
├── dist // npm モジュール公開
│ ├── index.js
│ └── package.json // npm publish
├── example // 動作確認
│ ├── public
│ ├── src
│ └── tsconfig.json // npm run start | yarn start
├── src // 開発環境
│ ├── component
│ ├── index.tsx
│ └── lib
└── tsconfig.json // tsx compile
``