use-gif-watermark

usage

installation

use yarn

yarn add use-gif-watermark

or use npm

npm i use-gif-watermark

import React, { useState } from "react";
import useGifWatermark from 'use-gif-watermark'

function Example() {
  const [watermark, setWatermark] = useState(null);
  const [img, setImg] = useState(null);

   const {
    base64,
    apply,
    download,
    gifFile,
    reset,
    status,
  } = useGifWatermark({
    gifSrc: img,
    watermarkSrc: watermark,
    position: "bottomright",
    watermarkHeight: 50,
    watermarkOpacity: 1,
    watermarkWidth: 50,
    downloadOnComplete: true,
    onError({ errorMessage }) {
      console.log(errorMessage);
    },
    onStart() {
      console.log("converting started");
    },
    onSuccess({ base64, file }) {
      console.log({ base64, file });
    },
  });

  return (
    <>
      <div>
        {img && <img height={50} width={50} src={img} alt="to be converted" />}
        <input
          type="file"
          accept="image/gif"
          onChange={(e) => {
            const files = e.target.files;
            if (files && files[0] !== null) {
              setImg(URL.createObjectURL(files[0]));
            }
          }}
        />
      </div>
      <div>
        {watermark && (
          <img height={50} width={50} src={watermark} alt="watermark" />
        )}
        <input
          type="file"
          accept="image/*"
          onChange={(e) => {
            const files = e.target.files;
            if (files && files[0] !== null) {
              setWatermark(URL.createObjectURL(files[0]));
            }
          }}
        />
        <div>
          {base64 && (
            <img height={100} width={100} src={base64} alt="Converted GIF" />
          )}
          <span>Applied watermark</span>
        </div>
        <div>
          <span>{status}</span>
          <button onClick={download}>download</button>
          <button onClick={apply}>apply</button>
          <button onClick={reset}>reset</button>
        </div>
      </div>
    </>
  );
}

Props accepted for useGifWatermark

prop	required	description	accepted value	default value
gifSrc	True	URL of the GIF	URL
watermarkSrc	True	URL of the watermark	URL
watermarkHeight	False	height of the watermark height	number	50
watermarkWidth	False	width of the watermark height	number	50
watermarkOpacity	False	opacity of the watermark height	number	1
downloadOnComplete	False	opacity of the watermark height	boolean	false
onError	False		boolean	({errorMessage})=>{}
onStart	False		boolean	()=>{}
onSuccess	False		boolean	({ base64, file })=>{base64 -> base64 of the watermark applied GIF,file -> GIF File}

values returned by useGifWatermark

prop	description	value type
base64	base64 of the new GIF	can be base64,null or undefined
gifFile	new GIF file	can be File,null or undefined
apply	applies watermark to the GIF	function
reset	resets all the value	function
download	downloads the new GIF	function
status	status	can be idle,converting,converted,failed,error

Special thanks to

This library wouldn't have been possible without the help of gifshot and gifuct-js