Package Exports

react-gradient-hover
react-gradient-hover/dist/index.esm.js
react-gradient-hover/dist/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-gradient-hover) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Gradient Hover

A React component that creates an interactive gradient effect following mouse movement on hover. The gradient smoothly animates and creates a spotlight effect that follows the cursor.

Features

🎨 Smooth gradient animation that follows mouse movement
🎯 Customizable gradient colors
⚡ High-performance animations using requestAnimationFrame
🔧 Flexible component API with TypeScript support
📱 Responsive and works on all screen sizes
🎪 Smooth return-to-center animation on mouse leave

Installation

npm install react-gradient-hover

yarn add react-gradient-hover

Usage

Basic Example

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

function App() {
  return (
    <GradientHover>
      <div style={{ padding: '2rem' }}>
        <h2>Hover over me!</h2>
        <p>The gradient will follow your mouse movement.</p>
      </div>
    </GradientHover>
  );
}

Custom Colors

<GradientHover colors={['#ff6b6b', '#4ecdc4']}>
  <div style={{ padding: '2rem' }}>
    <h2>Custom gradient colors</h2>
  </div>
</GradientHover>

Advanced Configuration

<GradientHover
  colors={['#667eea', '#764ba2']}
  animationSpeed={0.02}
  borderRadius="20px"
  transitionDuration={0.5}
  activeOverlayOpacity={0.1}
  className="my-custom-class"
  onClick={() => console.log('Clicked!')}
>
  <div style={{ padding: '3rem' }}>
    <h2>Advanced Configuration</h2>
    <p>With custom properties and click handler</p>
  </div>
</GradientHover>

Hide Gradient Until Hover

<GradientHover
  colors={['#ff6b6b', '#4ecdc4']}
  shouldAlwaysShowGradient={false}
>
  <div style={{ padding: '2rem' }}>
    <h2>Hidden Gradient</h2>
    <p>The gradient will only appear when you hover over this component</p>
  </div>
</GradientHover>

API

Props

Prop	Type	Default	Description
`colors`	`[string, string]`	`['#ff6b6b', '#4ecdc4']`	The two colors used for the gradient effect
`children`	`ReactNode`	-	The content to wrap with the gradient hover effect
`className`	`string`	`''`	Additional CSS classes to apply
`style`	`CSSProperties`	`{}`	Inline styles to apply
`onClick`	`() => void`	-	Click handler for the component
`isActive`	`boolean`	`true`	Whether the gradient effect is active
`animationSpeed`	`number`	`0.01`	Animation speed (0.01 = slower, 0.1 = faster)
`borderRadius`	`string`	`'10px'`	Border radius of the component
`transitionDuration`	`number`	`1`	Duration of the gradient transition animation in seconds
`activeOverlayOpacity`	`number`	`0.05`	Opacity of the active overlay when clicking
`shouldAlwaysShowGradient`	`boolean`	`true`	Whether to always show the gradient effect or only on hover

Styling

The component is fully customizable through props! All visual aspects can be controlled by passing the appropriate props:

<GradientHover
  colors={['#custom-color-1', '#custom-color-2']}
  borderRadius="20px"
  transitionDuration={2}
  activeOverlayOpacity={0.1}
  shouldAlwaysShowGradient={true}
  animationSpeed={0.02}
>
  {/* Your content */}
</GradientHover>

Advanced CSS Customization

If you need additional styling beyond the available props, you can target the component with CSS:

.gradient-hover {
  /* Your custom styles */
}

.gradient-hover--is-hovering {
  /* Styles applied during hover */
}

The component uses CSS custom properties internally, which are set from the props you pass.

Browser Support

This component uses modern CSS features including:

CSS custom properties
inset property

Make sure your target browsers support these features or provide appropriate fallbacks.

Development

Install dependencies

npm install

Build the package

npm run build

Run the example in development mode

npm run example

Run linting

npm run lint

Run linting with auto-fix

npm run lint:fix

Format code

npm run format

Type checking

npm run typecheck

License

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.