You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-pointer-type

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-pointer-type

React hooks for adapting to pointer type changes. The correct alternative to feature detection.

0.1.1
Source
npmnpm
Version published
Weekly downloads
0
-100%
Maintainers
1
Weekly downloads
 
Created
Source

React Pointer Type

React hooks for adapting to pointer type changes. The correct alternative to feature detection.

Quick start

yarn add react-pointer-type
/* App.module.css */

:global(.mouse) .pointerIndicator {
  background: red;
}

:global(.touch) .pointerIndicator {
  background: blue;
}

:global(.pen) .pointerIndicator {
  background: green;
}

.matchIndicator {
  background: red;
}

:global(.nohover) .matchIndicator {
  background: green;
}
import React from 'react';
import styles from './App.module.css';
import {
  useMatchPointerType,
  useMatchPointerTypeClassName,
  usePointerType,
  usePointerTypeClassName,
} from 'react-pointer-type';

function App() {
  const inputType = usePointerType();
  const match = useMatchPointerType(['touch', 'pen']);
  usePointerTypeClassName();
  useMatchPointerTypeClassName(['touch', 'pen'], {
    match: 'nohover',
  });

  return (
    <div>
      <div>Current pointer type: {inputType}</div>
      <div>Matching pen or touch: {String(match)}</div>
      <div className={styles.pointerIndicator}>
        This div is red for mouse, blue for touch and green for pen.
      </div>
      <div className={styles.matchIndicator}>
        This div is green if pen or touch are matched, otherwise red.
      </div>
    </div>
  );
}

export default App;

Keywords

react

FAQs

Package last updated on 04 Sep 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts