Package Exports

react-animated-gradient
react-animated-gradient/dist/cjs/index.js
react-animated-gradient/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-animated-gradient) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-animated-gradient

Animate gradients in React without the hassle.

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

Stars Forks Pulls

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