react-pointable

<Pointable /> (obsolete as of React 16.4.0)

A dependency free React component supporting declarative pointer event binding.

Migrating to React 16.4+

As of React 16.4.0, pointer events are now supported out of the box! Custom DOM attributes are also supported, meaning React works well with PEP in browsers that don't natively support pointer events.

This component still works well pre React 16.4, but if you're upgrading it is simple to remove this component from your code. You can replace any instances of the <Pointable> component with a native DOM element.

// For example, this:

<Pointable onPointerDown={() => alert('Touched!')}>
  Touch me
</Pointable>

// becomes this:

<div onPointerDown={() => alert('Touched!')}>
  Touch me
</div>

Purpose

• Allows using pointer events with React < 16.4.
• Compatible with the official pointer events polyfill and its touch-action workaround.
• Internal event listeners are kept up-to-date as pointer event handlers come and go.
• Customizable wrapper element.

Note that this component does nothing special to facilitate pointer capture.

Installation

npm install --save react-pointable

Usage

By default, a <Pointable /> component renders a <div> and passes through any non-pointer event props like className, style, etc. Any pointer event props will just work as expected.

When using <Pointable /> for interactive elements, this makes managing pointer events easy:

import Pointable from 'react-pointable';

<Pointable onPointerDown={() => alert('Touched!')}>
  Touch me
</Pointable>

Composing is also easy:

const HairTrigger = ({ onTouch, disabled, children, ...otherProps }) => (
  <Pointable onPointerEnter={disabled ? null : onTouch} {...otherProps}>
    {children}
  </Pointable>
);

All pointer events are supported:

onPointerMove, onPointerDown, onPointerUp, onPointerOver, onPointerOut, onPointerEnter, onPointerLeave, onPointerCancel

Additional Props

<Pointable /> accepts special non-pointer event props:

• tagName [string = 'div'] - If you don't want a <div /> to be rendered, you can pass any valid element type and it will be rendered instead.
• touchAction [string = 'auto'] - When used with PEP in a browser that doesn't support pointer events, chances are the CSS property touch-action also isn't supported. PEP therefore supports a touch-action attribute, and this prop allows setting that in a fully declarative manner. You can read more about the PEP attribute on its repo.
• elementRef [function] - Provides the generated element to a parent component. (optional)

Example

Here's a CodePen using Pointable that allows toggling between pointer and mouse events, using the same components.

TypeScript Typings

Typings for react-pointable are available on NPM.

If you're using a version of React < 16.4, run

npm install --save-dev @types/react-pointable@1.1.3

If you happen to be using React 16.4+ and can't yet remove this package for some reason, you can instead run

npm install --save-dev @types/react-pointable

To learn more, see the discussion in the DefinitelyTyped repo.

License

MIT