ipad-cursor
ipad-cursor copied to clipboard
A web implementation of the new iPadOS cursor in React ⚪️
git clone https://github.com/sambernhardt/ipad-cursor.git
npm i
npm run start
Basic usage
Add the CursorProvider to a page
// 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 (
<CursorProvider>
<Component {...pageProps} />
</CursorProvider>
)
}
}
Then wrap your components with the WithHover
function
// Component.js
import WithHover from '../cursor/WithHover';
const Component = () => <h1>;
export default WithHover(<Component />, 'block');
Caveats:
- To move the contents of the hovered component, the component must have a display type of
inline-block
orblock
. CSS transforms don't work on inline elements.