react-pointer-type

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

react-pointer-type

★ 9 Open GitHub ↗

A tiny React hook for adapting to pointer type changes. The correct alternative to feature detection.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Pointer Type

A tiny (442 B), zero dependency React hook for adapting to pointer type changes. The correct alternative to feature detection.

## Why

Web browsers can be used with different pointing devices. These pointing devices have different precisions and features. Touch, for example, is a crude pointing device which also occludes much of the screen. While pens are more precise, just like touch, they often lack hovering, which leads to "sticky" `:hover` states when the device tries to emulate the behavior. You need to adjust your UI to the needs of each of them.

To solve these problems, developers often use crude ways to detect whether a device is used with a touch screen, or with a mouse.

The issue with this solution is that modern devices like Microsoft Surface laptops or the iPad Pro not only support all three, but are routinely used with mouse, touch and pen inputs all in the same session. This renders traditional feature detection inadequate. You need to check for the pointing device in use *right now*, and react to changes in real time.

This library is an easy way to achieve that.

## Quick start

```
yarn add react-pointer-type
```

```css
/* App.css */

.mouse .pointer-indicator {
  background: red;
}

.touch .pointer-indicator {
  background: blue;
}

.pen .pointer-indicator {
  background: green;
}
```

```tsx
import React from 'react';
import './App.css';
import { usePointerType } from 'react-pointer-type';

function App() {
  const inputType = usePointerType({
    attachClass: true,
  });

return (
    <div>
      <div>Current pointer type: {inputType}</div>
      <div className="pointer-indicator">
        This div is red for mouse, blue for touch and green for pen.
      </div>
    </div>
  );
}

export default App;
```

## API Reference

### `usePointerType(options)`

Returns the current pointer type and optionally attaches the corresponding class to the document element.

#### Parameters

`options.initial: string = 'mouse'`: when the website is loaded, the pointing device is not known initially. You can set the default here.

`options.updateOn: PointerEventType = 'pointerdown'`: specifies which pointer event type to use for updating.

`options.attachClass: boolean = false`: whether to attach a class to the document element. Useful if you want to change the styles based on the pointer type. The possible classes are `.mouse`, `.pen` and `.touch`.

`options.classPrefix: string = ''`: what prefix to use for the class. Useful to avoid name collisions.

#### Returns

`pointerType: PointerType`: the current pointer type.

### Types

```ts
type PointerType = 'mouse' | 'pen' | 'touch';

# How does it work?

The library checks the `pointerType` property on pointer events. Pointer events are supported by all modern browsers and Safari.

react-pointer-type

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README