A lightweight (1.7 kB) package to easily track mouse position in React.js

Overview

useMousePosition - a custom React hook

A lightweight (1.7 kB) package to easily track mouse position in React.js

Install

npm install react-use-mouse-position

Example

import React from 'react'
import { useMousePosition } from 'react-use-mouse-position'

function MyApp() {
  const { mouseX, mouseY } = useMousePosition();
  console.log('mouseX:', mouseX) 

}
You might also like...

A small application to categorize and track your income and expenses.

Expense Tracker App with Typescript A small application to categorize and track your income and expenses. Expense Tracker App Demo Link You can check

Jul 1, 2022

A complete habits manager, where you can track your progress and complete each daily activity in an organized way.

TrackIt Habit manager in a dynamic, clear and simple way. TackIt is an application that seeks to make it simple and accessible for any user to control

Dec 31, 2022

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Jan 8, 2023

A lightweight Apple Music client for Windows, built with MusicKit JS, Edge WebView2 and React.

A lightweight Apple Music client for Windows, built with MusicKit JS, Edge WebView2 and React.

Lito Music English | 中文 Lito (/laɪto/) Music is a lightweight Apple Music client for Windows, built with MusicKit JS, Edge WebView2 and React. System

Dec 30, 2022

An easily internationalizable, mobile-friendly datepicker library for the web

An easily internationalizable, mobile-friendly datepicker library for the web

react-dates An easily internationalizable, accessible, mobile-friendly datepicker library for the web. Live Playground For examples of the datepicker

Dec 30, 2022

⚪ SVG-Powered component to easily create skeleton loadings.

⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features ⚙️ Customizable: Feel free to change the colors,

Jan 4, 2023

🧱 Easily extend native three.js materials with modular and composable shader units and effects

🧱 Easily extend native three.js materials with modular and composable shader units and effects

three-extended-material Easily extend native three.js materials with modular and composable shader units and effects. Usage npm install three-extended

Dec 2, 2022

A PhotoShot Plugin to get material you colors easily.

material-you 可以快速获取符合 material-you 配色的 PhotoShop 插件。 参考自 Material Theme Builder 安装 初次安装 从 release 中下载压缩包并解压。打开 Photoshop ,运行 文件-脚本-浏览 ,选择安装包中的 安装脚本.js

Jun 17, 2022

Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones.

Stitches Mix Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones. Usage To import al

Aug 8, 2022
Releases(v1.0.0)
  • v1.0.0(Feb 2, 2022)

    What's New?

    First release of react-use-mouse-position, a lightweight package containing simple hook to track current mouse position.

    Bugs

    Please direct all bugs here

    Requests/Ideas?

    Reach out to me @hxf31891

    Source code(tar.gz)
    Source code(zip)
Owner
Harry Fox
Co-founder & developer @Bloks-Builders, freelance web & mobile dev with @robo-fox, and floral shirt enthusiast.
Harry Fox
Concircle scanner mobile app is application That helps you scan your order and position and to know if there are exact or not. it's cross-platform app.

Concircle scanner mobile app ⭐ Star on GitHub — it motivates Me a lot! Concircle scanner mobile app is application That helps you scan your order and

Aymen Ouerghui 10 May 7, 2022
An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.

Hover Preview Effect with Mini Map An experimental hover effect, where a content preview is shown while a mini map indicates the position of the curso

Codrops 27 Dec 29, 2022
react-dialog is a custom react hook to use a dialog easily

react-dialog react-dialog is a custom react hook to use a dialog easily. Documentation To use react-dialog follow the documentation. useDialog Returns

Levy Mateus Macedo 2 Mar 29, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
A React-fullstack platform to track all cryptocurrency in one place.

A React-fullstack platform to track all cryptocurrency in one place. Create your account and add your favorite coins.

Siddharth Singh Bhadoriya 14 Oct 10, 2022
A React-Fullstack platform helps to track & compare your Incomes & Expenses transactions in one place via detailed Graphical information to manage your Budget.

Budget Master Track your income and expenses in one place via detailed graphical information to manage your budget. Manage your budget and transaction

Siddharth Singh Bhadoriya 9 Nov 27, 2022
A custom react hook to use a dialogs easily.

dialog-hook The dialog-hook is a custom react hook to use a dialog easily. First of all it is necessary to install the package in your project some co

Levy Mateus Macedo 2 Mar 29, 2022
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 8.1k Jan 5, 2023
This app helps you keep track of your expenses in months and years. Also, it shows a graph representing those expenses.

Expenses Tracker This app helps you keep track of your expenses in months and years. Also, it shows a graph representing those expenses. Built With Ma

Nicolae Pop 6 Aug 8, 2022
🥗 Track what you and your friends are eating

Comoki https://comoki.vercel.app Track what you and your friends are eating. Development This project uses yarn to manage dependencies. Install the de

Folkip 4 May 3, 2022