https://github.com/iamthesiz/use-cursor

🐭 React hook for customizing the mouse
https://github.com/iamthesiz/use-cursor

Last synced: 1 day ago
JSON representation

🐭 React hook for customizing the mouse

• Host: GitHub
• URL: https://github.com/iamthesiz/use-cursor
• Owner: iamthesiz
• License: mit
• Created: 2019-09-10T03:43:01.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-10-16T10:53:30.000Z (over 5 years ago)
• Last Synced: 2025-01-26T12:01:47.610Z (4 days ago)
• Language: TypeScript
• Size: 99.6 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: license.md

Awesome Lists containing this project

README

        







    
useCursor







    

      

    

    

      

    

    

      

    

    

      

    

    

        

    





  

    🐭 React hook for customizing the mouse

  

  


  ⚠️This package is currently WIP and not even published to npm⚠️











  
npm i use-cursor









Features

---------

- SSR (server side rendering) support

- make custom trendy mouses

Examples

--------

- [Basic Usage](https://codesandbox.io/s/usecursor-oey2r)

Usage

-----

Basic Usage useCursor

```js

import { CursorProvider, useCursor } from 'use-cursor'

const Mouse = styled.div`

  position: absolute;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: rgb(137,183,44);

  z-index: 2;

  pointer-events: none;

`

const Follower = styled.div`

  position: absolute;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  opacity: 0.6;

  pointer-events: none;

  box-sizing: border-box;

  z-index: 3;

  border: 4px solid rgb(137,183,44);

`

function App() {

  const mouse = {

    isActive: false,

    x: useRef(0),

    y: useRef(0),

    ref: useRef(),

    ease: 1,

    isMoving: useRef(true),

    component: Mouse,

  }

  const follower = {

    isActive: false,

    x: useRef(0),

    y: useRef(0),

    ref: useRef(),

    ease: 0.1,

    isMoving: useRef(true),

    component: Follower,

  }

  return (

    

      

    

  )

}

const Logo = () => {

  const cursor = useCursor({

    onMouseEnter({ follower }) {

      const increase = 120

      follower.ref.current.style = `

        width: ${increase}px;

        height: ${increase}px;

        border-color: rgb(137,183,44);

        mix-blend-mode: inherit;

        transition: width .55s, height .55s;

      `

    },

    onMouseLeave({ follower }) {

      follower.ref.current.style = `

        transition: width .55s, height .55s;

        width: 60px;

        height: 60px;

      `

    }

  })

  return 

}

```

Overview

--------

Hooks

| Hook                | Description                                                                              |

| --------------------- | ---------------------------------------------------------------------------------------- |

| `useCursor` | The base hook |

    

Todos

------

 - [ ] take a look at [`useMouse`](https://github.com/streamich/react-use/blob/master/src/useMouse.ts)

 - [ ] tests

 - [ ] codesandbox examples

  - [example 1 todo](http://www.andreadlabarile.it/works/molino)

  - [example 2 todo](https://phoenix.cool)

  - [example 3 todo](https://codepen.io/tamm/pen/LIFam)

  - [example 4 todo](https://github.com/tholman/cursor-effects)

  - [ideas](https://medium.com/@dailyfire/cursor-trails-3-simple-css-tricks-to-add-to-any-website-part-1-64750798583c)

  - [canvas idea](https://codepen.io/InsideDown/pen/rjPEdM)

  - [canvas 2](https://codepen.io/ninivert/pen/ZpEQBR)

  

 - [ ] ssr testing

 - [ ] typescript support