How to create a GIF from images in React
📅May 15, 2022
In this article, we will show you how to create a GIF from images in React. If you have a list of images and you would like to convert the images to GIF, here we will explain to you step by step.
Checkout more articles on ReactJS
- React code editor and syntax highlighter using PrismJS
- Allow only alphabets in the input field in React
- How to swap two array elements in JavaScript
- How to use async/await in Loops
- How to create tabs in React
Demo Application
Output - How to create a GIF from images in React - Clue Mediator
Steps to create a GIF from images in React
1. Create a React application
Let’s create a react application using `create-react-app`. Run the following command to create an application.
npx create-react-app react-images-to-gif
2. Install NPM package
Here, we’ll use the gifshot NPM package to create a GIF from the list of images. Run the following command to install the NPM package.
npm i gifshot
3. Create a component
Let’s create a simple component where we will add the button to create a GIF from images.
App.js
import React from 'react';
function App() {
const handleClick = () => {
}
return (
<div class="App">
<h3>Create a GIF from images in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener">Clue Mediator</a></h3>
<button onclick={handleClick}>Click to create a GIF</button>
</div>
);
}
export default App;
Now, let’s import the `gifshot` at the top of the page and add the following command to convert the images to GIF.
import React, { useState } from 'react';
import { createGIF } from 'gifshot';
function App() {
const [progress, setProgress] = useState(0);
const handleClick = () => {
const images = [
'https://cdn.pixabay.com/photo/2022/05/07/20/22/flowers-7180947__340.jpg',
'https://cdn.pixabay.com/photo/2021/11/19/11/55/field-6809045__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/08/20/21/flowers-7182930__340.jpg',
'https://cdn.pixabay.com/photo/2021/08/13/21/14/kiteboarding-6543982__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/07/20/22/flowers-7180947__340.jpg',
'https://cdn.pixabay.com/photo/2021/11/19/11/55/field-6809045__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/08/20/21/flowers-7182930__340.jpg',
'https://cdn.pixabay.com/photo/2021/08/13/21/14/kiteboarding-6543982__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/07/20/22/flowers-7180947__340.jpg',
'https://cdn.pixabay.com/photo/2021/11/19/11/55/field-6809045__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/08/20/21/flowers-7182930__340.jpg',
'https://cdn.pixabay.com/photo/2021/08/13/21/14/kiteboarding-6543982__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/07/20/22/flowers-7180947__340.jpg',
'https://cdn.pixabay.com/photo/2021/11/19/11/55/field-6809045__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/08/20/21/flowers-7182930__340.jpg',
'https://cdn.pixabay.com/photo/2021/08/13/21/14/kiteboarding-6543982__340.jpg'
];
const options = {
images: images,
gifWidth: 500,
gifHeight: 300,
numWorkers: 5,
frameDuration: 0.01,
sampleInterval: 10,
progressCallback: e => setProgress(parseInt(e * 100))
};
createGIF(options, obj => {
if (!obj.error) {
console.log('GIF Image: ', obj.image);
}
});
}
return (
<div class="App">
<h3>Create a GIF from images in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener">Clue Mediator</a></h3>
<button onclick={handleClick}>Click to create a GIF</button>
{progress !== 0 && <label>Creating GIF... {progress}%</label>}
</div>
);
}
export default App;
Here, we will write the code to download the Base64 GIF image. If you do not know, refer to the following article.
**Reference Article: **How to download a base64 image in JavaScript
App.js
import React, { useState } from 'react';
import { createGIF } from 'gifshot';
function App() {
const [progress, setProgress] = useState(0);
const handleClick = () => {
const images = [
'https://cdn.pixabay.com/photo/2022/05/07/20/22/flowers-7180947__340.jpg',
'https://cdn.pixabay.com/photo/2021/11/19/11/55/field-6809045__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/08/20/21/flowers-7182930__340.jpg',
'https://cdn.pixabay.com/photo/2021/08/13/21/14/kiteboarding-6543982__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/07/20/22/flowers-7180947__340.jpg',
'https://cdn.pixabay.com/photo/2021/11/19/11/55/field-6809045__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/08/20/21/flowers-7182930__340.jpg',
'https://cdn.pixabay.com/photo/2021/08/13/21/14/kiteboarding-6543982__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/07/20/22/flowers-7180947__340.jpg',
'https://cdn.pixabay.com/photo/2021/11/19/11/55/field-6809045__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/08/20/21/flowers-7182930__340.jpg',
'https://cdn.pixabay.com/photo/2021/08/13/21/14/kiteboarding-6543982__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/07/20/22/flowers-7180947__340.jpg',
'https://cdn.pixabay.com/photo/2021/11/19/11/55/field-6809045__340.jpg',
'https://cdn.pixabay.com/photo/2022/05/08/20/21/flowers-7182930__340.jpg',
'https://cdn.pixabay.com/photo/2021/08/13/21/14/kiteboarding-6543982__340.jpg'
];
const options = {
images: images,
gifWidth: 500,
gifHeight: 300,
numWorkers: 5,
frameDuration: 0.01,
sampleInterval: 10,
progressCallback: e => setProgress(parseInt(e * 100))
};
createGIF(options, obj => {
if (!obj.error) {
const link = document.createElement('a');
link.download = 'sample.gif';
link.href = obj.image;
link.click();
setProgress(0);
}
});
}
return (
<div class="App">
<h3>Create a GIF from images in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener">Clue Mediator</a></h3>
<button onclick={handleClick}>Click to create a GIF</button>
{progress !== 0 && <label>Creating GIF... {progress}%</label>}
</div>
);
}
export default App;
4. Output
Let’s run the application and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂