React Gradient Hover

A high-performance React component that creates an elegant, interactive gradient effect that follows cursor movement. Perfect for creating engaging interactive hover states.

Documentation Guide

Overview

React Gradient Hover enhances your UI with smooth, performant gradient animations that respond to user interaction. The component creates a dynamic spotlight effect that follows the cursor, providing a modern and engaging user experience.

Key Features

🎨 Fluid gradient animations using requestAnimationFrame
🌈 Support for multiple gradient colors (minimum of 2)
⚡ Optimized performance with debounced event handling
🎯 Customizable animation speed and transition duration
📱 Responsive design with automatic resizing
🔧 TypeScript support with comprehensive type definitions

Installation

npm install react-gradient-hover

yarn add react-gradient-hover

Quick Start

import { GradientHover } from "react-gradient-hover";

function App() {
  return (
    <GradientHover>
      <div style={{ padding: "2rem" }}>
        <h2>Interactive Gradient</h2>
        <p>Hover to see the effect in action</p>
      </div>
    </GradientHover>
  );
}

Component API

Props

Prop	Type	Default	Description
`colors`	`string[]`	`['#EB2DD2', '#5AB5EE']`	Array of gradient colors (minimum 2)
`children`	`ReactNode`	Required	Content to wrap with the gradient effect
`className`	`string`	`''`	Additional CSS class names
`style`	`CSSProperties`	`{}`	Additional inline styles
`onClick`	`() => void`	-	Optional click handler
`animationSpeed`	`number`	`5`	Animation speed (1-10, where 10 is fastest)
`transitionDuration`	`number`	`1`	Transition duration in seconds
`shouldAlwaysShowGradient`	`boolean`	`true`	Whether to show gradient before hover

Advanced Usage

Custom Color Gradients

// Two-color gradient
<GradientHover colors={["#667eea", "#764ba2"]}>
  <div>Your content</div>
</GradientHover>

// Multi-color gradient
<GradientHover colors={["#ff6b6b", "#4ecdc4", "#45b7d1"]}>
  <div>Your content</div>
</GradientHover>

Animation Control

<GradientHover
  animationSpeed={7}
  transitionDuration={0.5}
  shouldAlwaysShowGradient={false}
>
  <div>Your content</div>
</GradientHover>

Browser Support

The component utilizes modern CSS features including:

CSS Custom Properties (CSS Variables)
requestAnimationFrame API
Standard CSS positioning and transforms

Ensure your target browsers support these features or include appropriate polyfills.

Development

Prerequisites

Node.js (version 16 or higher)
npm or yarn

Local Development

Install dependencies:
```
npm install
```
Start development server:
```
npm run dev
```
Run tests:
```
npm test
```
Build the package:
```
npm run build
```

Documentation

View the interactive documentation and examples:

npm run styleguide

Publishing Process

Before publishing a new version, ensure you complete the following checklist:

[ ] All tests pass (npm test)
[ ] Code is linted (npm run lint)
[ ] TypeScript compilation succeeds (npm run typecheck)
[ ] Documentation is up to date
[ ] Version number is appropriate for changes (following semver)
[ ] Changelog is updated
[ ] Git working directory is clean

Testing the Package Locally

Before publishing to npm, it's recommended to test the package locally:

Create a test package:

npm pack --dry-run  # List the files that will be included
npm pack           # Create the tarball

Test in another project:

cd ../your-test-project
npm install ../react-gradient-hover/react-gradient-hover-x.y.z.tgz

Verify the package works as expected in your test project

Publishing Steps

Update the version:

npm version patch  # for bug fixes (1.0.0 -> 1.0.1)
npm version minor  # for new features (1.0.0 -> 1.1.0)
npm version major  # for breaking changes (1.0.0 -> 2.0.0)

Build and publish:
```
npm run build
npm publish
```
Push changes and tags:
```
git push && git push --tags
```

Troubleshooting

If publishing fails:

Ensure you're logged in: npm whoami
Verify you have publish permissions: npm access ls-packages
Check that the package name is available: npm view react-gradient-hover

For build errors:

Verify all dependencies are installed
Check TypeScript and Rollup configurations
Review the build logs for specific errors

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.