<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
alert('Touched!')}> Touch me```
- Allows using pointer events with React < 16.4.
- Compatible with the official pointer events polyfill and its
- Internal event listeners are kept up-to-date as pointer event handlers come and go.
- Customizable wrapper element.
Installation``` npm install --save react-pointable ```
UsageBy default, a
<Pointable />component renders a
<div>and passes through any non-pointer event props like
style, etc. Any pointer event props will just work as expected. When using
); ``` All pointer events are supported:
<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-actionalso isn't supported. PEP therefore supports a
touch-actionattribute, 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)