Declarative pointer event binding. Works well alongside PEP.
npm install react-pointable component with a native DOM element.
javascript
// For example, this:
alert('Touched!')}>
Touch me
// becomes this:
alert('Touched!')}>
Touch me
`
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 component renders a and passes through any non-pointer event props like className, style, etc. Any pointer event props will just work as expected.
When using for interactive elements, this makes managing pointer events easy:
`javascript
import Pointable from 'react-pointable';
alert('Touched!')}>
Touch me
`
Composing is also easy:
`javascript
const HairTrigger = ({ onTouch, disabled, children, ...otherProps }) => (
{children}
);
`
All pointer events are supported:
onPointerMove, onPointerDown, onPointerUp, onPointerOver, onPointerOut, onPointerEnter, onPointerLeave, onPointerCancel
Additional Props
accepts special non-pointer event props:
- tagName [string = 'div'] - If you don't want a 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
``