@remotion/gif 3.0.0-lambda.414 → 3.0.0-lambda.424
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
### Remotion GIF
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.org/package/@remotion/player)
|
|
4
|
+
[](https://npmcharts.com/compare/@remotion/player?minimal=true)
|
|
5
|
+
[](https://packagephobia.now.sh/result?p=@remotion/player)
|
|
6
|
+
|
|
7
|
+
The Remotion GIF package allows you to embed GIFs into a [Remotion](https://remotion.dev) composition that synchronizes with Remotion's `useCurrentFrame()`'s hook.
|
|
8
|
+
|
|
9
|
+
To use this package, we'll be assuming [you already have a Remotion project](https://remotion.dev/docs).
|
|
10
|
+
|
|
11
|
+
Use the same package manager to install this package that you have used to initialize your Remotion project:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm i @remotion/gif
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
yarn add @remotion/gif
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
pnpm i @remotion/gif
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
> Make sure all Remotion packages you install (`remotion`, `@remotion/player`, `@remotion/gif`...) [have the same version](https://remotion.dev/docs/version-mismatch).
|
|
26
|
+
|
|
27
|
+
### Basic Example
|
|
28
|
+
|
|
29
|
+
This will render a GIF that fills the whole size of the composition:
|
|
30
|
+
|
|
31
|
+
```javascript
|
|
32
|
+
import { useVideoConfig } from "remotion";
|
|
33
|
+
import { Gif } from "@remotion/gif";
|
|
34
|
+
|
|
35
|
+
export const MyComponent = () => {
|
|
36
|
+
const { width, height } = useVideoConfig();
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<Gif
|
|
40
|
+
src="https://media.giphy.com/media/3o72F7YT6s0EMFI0Za/giphy.gif"
|
|
41
|
+
width={width}
|
|
42
|
+
height={height}
|
|
43
|
+
fit="fill"
|
|
44
|
+
/>
|
|
45
|
+
);
|
|
46
|
+
};
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### API
|
|
50
|
+
|
|
51
|
+
Prop | Function |
|
|
52
|
+
--- | --- |
|
|
53
|
+
src | is a required prop, and it is the source of the GIF. It can be a URL or a local image - [See how you can import assets](https://www.remotion.dev/docs/assets).|
|
|
54
|
+
width | The display width of the GIF
|
|
55
|
+
height | The display height of the GIF
|
|
56
|
+
fill | The layout of the GIF in its current container. It accepts the following values: `fill`, `contain`, and `cover`
|
|
57
|
+
|
|
58
|
+
For a complete reference of the available props, refer to [the @remotion/gif documentation](https://www.remotion.dev/docs/gif).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/gif",
|
|
3
|
-
"version": "3.0.0-lambda.
|
|
3
|
+
"version": "3.0.0-lambda.424+994a31b6b",
|
|
4
4
|
"description": "Gif component for remotion",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"repository": {
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@react-gifs/tools": "0.1.2",
|
|
25
25
|
"lru_map": "0.4.1",
|
|
26
|
-
"remotion": "3.0.0-lambda.
|
|
26
|
+
"remotion": "3.0.0-lambda.424+994a31b6b"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@jonny/eslint-config": "^2.1.251",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"publishConfig": {
|
|
65
65
|
"access": "public"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "994a31b6bfd812c7552c8d157c14c59667f8efce"
|
|
68
68
|
}
|