https://github.com/sambernhardt/ipad-cursor

A web implementation of the new iPadOS cursor in React ⚪️
https://github.com/sambernhardt/ipad-cursor

cursor greensock ipados next nextjs react reactjs

Last synced: 5 days ago
JSON representation

A web implementation of the new iPadOS cursor in React ⚪️

• Host: GitHub
• URL: https://github.com/sambernhardt/ipad-cursor
• Owner: sambernhardt
• License: mit
• Created: 2020-05-09T18:35:25.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T11:19:27.000Z (almost 2 years ago)
• Last Synced: 2024-12-18T23:24:48.954Z (8 days ago)
• Topics: cursor, greensock, ipados, next, nextjs, react, reactjs
• Language: JavaScript
• Homepage: https://ipad-cursor.now.sh/
• Size: 1.71 MB
• Stars: 192
• Watchers: 4
• Forks: 11
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
`git clone https://github.com/sambernhardt/ipad-cursor.git`

`npm i`

`npm run start`

![Preview](https://github.com/sambernhardt/ipad-cursor/blob/master/public/preview.gif)

# Basic usage

## Add the CursorProvider to a page

```javascript

// app.js

import App from 'next/app';

import CursorProvider from '../cursor/Provider';

export default class MyApp extends App {

  render () {

    const { Component, pageProps } = this.props;

    

    return (

      

        

      

    )

  }

}

```

## Then wrap your components with the `WithHover` function

```javascript

// Component.js

import WithHover from '../cursor/WithHover';

const Component = () => 
;


export default WithHover(, 'block');

```

### Caveats:

- To move the contents of the hovered component, the component must have a display type of `inline-block` or `block`. CSS transforms don't work on inline elements.