react-animated-gradient

Animate gradients in React without the hassle.

https://react-animated-gradient.vercel.app/

Installation

npm install react-animated-gradient

yarn add react-animated-gradient

Usage

• Basic usage:

import React, { useState } from "react";
import { Gradient } from "react-animated-gradient";

export const Example = () => {
  const [gradient, setGradient] = useState(["#00dfd8", "#007cf0"]);

  return (
    <>
      <Gradient
        currentGradient={gradient}
        animationDuration={400}
        style={{
          width: 300,
          height: 300,
        }}
      />
      <button onClick={() => setGradient(["#ff0080", "#7928ca"])}>
        Animate!
      </button>
    </>
  );
};

• Creating a loop:

// AnimatedGradient.jsx
import React, { useEffect, useState } from "react";
import { Gradient } from "react-animated-gradient";

export const AnimatedGradient = (props) => {
  const [currentGradientIndex, setCurrentGradientIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      if (currentGradientIndex === props.colors.length - 1) {
        setCurrentGradientIndex(0);
      } else {
        setCurrentGradientIndex((prev) => prev + 1);
      }
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, [currentGradientIndex, props.colors]);

  return (
    <Gradient
      currentGradient={props.colors[currentGradientIndex]}
      animationDuration={400}
      angle={90}
      style={{
        width: 300,
        height: 300,
      }}
    />
  );
};

// SomeComponent.jsx
import React from "react";
import { AnimatedGradient } from "./AnimatedGradient";

export const SomeComponent = () => {
  return (
    <AnimatedGradient
      colors={[
        ["#00dfd8", "#007cf0"],
        ["#ff0080", "#7928ca"],
        ["#ff4d4d", "#f9cb28"],
      ]}
    />
  );
};

Licence

MIT License