AnimatedBorder Component

The AnimatedBorder component adds a customizable animated border effect to its children. It is built with React and can be styled using CSS variables for easy customization.

Table of Contents

• Installation
• Usage
• Props
• License

Installation

To use the AnimatedBorder component, install it via npm or yarn. Ensure that you have the required CSS file included in your project.

npm install react-animated-border

Usage Example

You can use the AnimatedBorder component in your application like this:

import React from "react";
import AnimatedBorder from "react-animated-border";

const App = () => {
  return (
    <div style={{ width: '400px', height: '400px'}}>
    <AnimatedBorder borderAnimationColor="rgba(255, 0, 0, 1)">
      <h1>Hello, World!</h1>
    </AnimatedBorder>
    </div>
  );
};

export default App;

Props

| Prop | Type | Required | Default | Description | |------------------------|-------------|----------|-------------------------------|---------------------------------------------------------------| | children | ReactNode | Yes | N/A | The content to be wrapped inside the animated border. | | borderAnimationColor | string | No | rgba(41, 141, 223, 1) | The color of the animated border. You can pass any valid CSS color value. | | Note | N/A | N/A | N/A | A div wrapper is added to the AnimatedBorder. Without it, the animated border will take the parent's width and height. Check the example for clarification. |

Animated Border Example

This image demonstrates the animated border effect.

useSpotlight Hook

The useSpotlight hook creates a spotlight effect that follows the mouse pointer within a component. It allows customization of the spotlight and hotspot colors.

Props

spotlightColor (optional)

• Type: string
• Default: "rgba(41, 141, 223, 0.3)"
• Description: The color of the spotlight effect.

hotspotColor (optional)

• Type: string
• Default: "rgba(255, 255, 255, 1)"
• Description: The color of the area outside the spotlight.

Props

| Prop Name | Type | Required | Default | Description | |------------------|--------|----------|------------------------------|---------------------------------------| | spotlightColor | string | No | "rgba(41, 141, 223, 0.3)" | The color of the spotlight effect. | | hotspotColor | string | No | "rgba(255, 255, 255, 1)" | The color of the area outside the spotlight. |

import React from 'react';
import useSpotlight from 'react-animated-border';

const SpotlightComponent = () => {
  const { handleMouseMove, spotlightStyle } = useSpotlight();

  return (
    <div
      onMouseMove={handleMouseMove}
      style={{ width: '100%', height: '400px', ...spotlightStyle }}
    >
      Hover over this area to see the spotlight effect!
    </div>
  );
};

export default SpotlightComponent;

import React from 'react';
import useSpotlight from 'react-animated-border';

const Example = () => {
  const { handleMouseMove, spotlightStyle } = useSpotlight('rgba(255, 0, 0, 0.5)', 'rgba(0, 0, 0, 0.8)');

  return (
    <div
      onMouseMove={handleMouseMove}
      style={{ width: '100%', height: '400px', ...spotlightStyle, position: 'relative' }}
    >
      <h2 style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', color: '#fff' }}>
        Move your mouse here!
      </h2>
    </div>
  );
};

export default Example;

Example Image

This image demonstrates the spotlight effect in action.