Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-pointable
Advanced tools
A dependency free React component supporting declarative pointer event binding.
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>
touch-action
workaround.Note that this component does nothing special to facilitate pointer capture.
npm install --save react-pointable
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
<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.
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.
MIT
FAQs
Declarative pointer event binding. Works well alongside PEP.
We found that react-pointable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.