A dependency free React component supporting declarative pointer event binding.

• Allows using pointer events with React today.
• 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.

npm install --save react-pointable

Version 1.x relies on React 15.5.x and therefore the prop-types package. If you are on an older version of React and not using prop-types yet, install [email protected] instead.

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:

<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

<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)

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

MIT