React FollowMouse Component

The FollowMouse component is a React component that tracks the mouse cursor position and renders a customizable mouse follower element. It allows you to add interactive and visually appealing mouse effects to your web applications. Also, it understands which element it's hovering and apply the different related impacts on the component (e.g. button, a, img, span, p, etc...)

Live Demo

Installation

You can install the follow-mouse package from npm:

npm install react-follow-mouse

Usage

Import the FollowMouse component in your React application:

import React from 'react';
import FollowMouse from 'react-smart-mouse'

const App = () => {
  return (
    <div>
      {/* Your other components */}
      <FollowMouse
        // Props for customizing the mouse follower appearance(optional)
        // Customize the styles for different elements
        pStyle={{ color: 'rgba(191, 75, 30, 1)', height: '40px', width: '40px' }}
        aStyle={{ color: 'rgba(132, 245, 39, 0.8)', height: '20px', width: '20px' }}
        buttonStyle={{ color: 'rgba(118, 39, 245, 0.8)', height: '20px', width: '20px' }}
        // Specify default width and height for the mouse follower
        defaultWidth="35px"
        defaultHeight="35px"
        // Other optional props
        debug={true}
      />
    </div>
  );
};

export default App;

Props

The FollowMouse component accepts the following props:

prop	type	default	description
pStyle	object	{ color: 'rgba(0, 0, 0, 0.125)', height: '35px', width: '35px', top: '-5'. left: '-10'}	Custom styles for the p elements.
aStyle	object	{ color: 'rgba(0, 0, 0, 0.125)', height: '35px', width: '35px', top: '-5'. left: '-10'}	Custom styles for the a elements.
buttonStyle	object	{ color: 'rgba(0, 0, 0, 0.125)', height: '35px', width: '35px', top: '-5'. left: '-10'}	Custom styles for the button elements.
spanStyle	object	{ color: 'rgba(0, 0, 0, 0.125)', height: '35px', width: '35px', top: '-5'. left: '-10'}	Custom styles for the span elements.
imgStyle	object	{ color: 'rgba(0, 0, 0, 0.125)', height: '35px', width: '35px', top: '-5'. left: '-10'}	Custom styles for the img elements.
inputStyle	object	{ color: 'rgba(0, 0, 0, 0.125)', height: '35px', width: '35px', top: '-5'. left: '-10'}	Custom styles for the input elements.
textareaStyle	object	{ color: 'rgba(0, 0, 0, 0.125)', height: '35px', width: '35px', top: '-5'. left: '-10'}	Custom styles for the textarea elements.
labelStyle	object	{ color: 'rgba(0, 0, 0, 0.125)', height: '35px', width: '35px', top: '-5'. left: '-10'}	Custom styles for the label elements.
liStyle	object	{ color: 'rgba(0, 0, 0, 0.125)', height: '35px', width: '35px', top: '-5'. left: '-10'}	Custom styles for the li elements.
defaultWidth	string	35px	The default width of the mouse follower.
defaultHeight	string	35px	The default Height of the mouse
defaultTop	number	-5	The default top position of the mouse follower element.
defaultLeft	number	-5	The default left position of the mouse follower element.
defaultColor	string	rgba(0, 0, 0, 0.5)	The default color of the mouse follower element.
debug	boolean	false	Enable debug mode to log element names and custom styles to the console. Useful for debugging.

Customizing Element Styles

You can customize the default hover cursor appearance for different elements by passing style objects as props to the corresponding element style props. Here's an example of how you can customize the styles for different elements:

<FollowMouse
  // Customize the styles for different elements
  pStyle={{ color: 'red', height: '40px', width: '40px' }}
  aStyle={{ color: 'blue', height: '20px', width: '20px' }}
  buttonStyle={{ color: 'green', height: '30px', width: '30px' }}
  spanStyle={{ color: 'purple', height: '25px', width: '25px' }}
  imgStyle={{ color: 'yellow', height: '50px', width: '50px' }}
  inputStyle={{ color: 'orange', height: '35px', width: '35px' }}
  textareaStyle={{ color: 'brown', height: '35px', width: '35px' }}
  labelStyle={{ color: 'gray', height: '40px', width: '40px' }}
  liStyle={{ color: 'pink', height: '40px', width: '40px' }}
/>

In the example above, we have specified custom styles for the p, a, button, span, img, input, textarea, label, and li elements. You can adjust the color, height, and width values to match your desired appearance.

Customizing Individual Elements with mousecustom

You can customize the default hover cursor appearance for individual elements by using the mousecustom attribute on the element and passing a JSON string as its value. Here's an example of how you can use the mousecustom prop to customize the height of an element:

<input type="text" mousecustom={JSON.stringify({ height: '50px' })} />

In the example above, the element has a mousecustom attribute with a JSON string value that specifies a custom height of '50px'. You can apply this approach to other elements as well.

Next.js

For using this component with Next.js you should create the client component and import FollowMouse to this component:

"use client"

import React from 'react'
import FollowMouse from 'react-smart-mouse'

const FollowMouseComponent = () => {
  return (
    <FollowMouse />
  )
}

export default FollowMouseComponent

License

This project is licensed under the MIT License. See the LICENSE file for details.

© Copyright 2023 - @BilVaD1