Skip to content

Native cursor management for React Native Windows applications with support for 10 cursor types. Solves the inability to use CSS cursor properties like cursor: pointer in React Native Windows applications.

License

Notifications You must be signed in to change notification settings

LevPotapov/react-native-windows-cursor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@levpotapov/react-native-windows-cursor

🖱️ Native cursor management for React Native Windows applications with support for 10 cursor types. Solves the inability to use CSS cursor properties like cursor: pointer in React Native Windows applications.

npm version License: MIT

Features:

  • ✅ 10 cursor types (arrow, pointer, cross, help, ibeam, wait, resize, etc.)
  • ✅ TypeScript support
  • ✅ Zero dependencies
  • ✅ Native Windows implementation

Installation:

Step 1: Install the package

npm install @levpotapov/react-native-windows-cursor
# or
yarn add @levpotapov/react-native-windows-cursor

Step 2: Link native modules (React Native Windows)

npx react-native autolink-windows

Step 3: Rebuild your Windows app

npm run windows

That's it! The package is ready to use.

API:

useCursor()

Returns an object with cursor control methods.

Methods:

  • setArrow() - Default arrow cursor
  • setPointer() - Hand pointer (for clickable elements)
  • setCross() - Crosshair cursor
  • setHelp() - Help cursor (with question mark)
  • setIBeam() - Text selection cursor (I-beam)
  • setWait() - Loading/waiting cursor
  • setSizeAll() - Move cursor (all directions)
  • setSizeNorthSouth() - Vertical resize cursor
  • setSizeWestEast() - Horizontal resize cursor
  • setNo() - Not allowed cursor
  • setDefault() - Reset to default (arrow)
  • setCursor(type) - Set cursor by type name

Platform Support:

  • ✅ Windows 10/11 (UWP)
  • ✅ React Native Windows (UWP template)

Compatibility with React Native Windows:

0.79.x ✅ Tested 0.73.x - 0.78.x ⚠️ Should work (untested) 0.63.x - 0.72.x ⚠️ May work (untested)

Usage Example :

  1. Copy the code from this file example
  2. Import CursorTestScreen in your App.tsx

Demo

License

MIT © Lev Potapov

Credits

Created for the React Native Windows community.

About

Native cursor management for React Native Windows applications with support for 10 cursor types. Solves the inability to use CSS cursor properties like cursor: pointer in React Native Windows applications.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published