Suggestion for documentation - PEP with React

In order to get the PEP polyfill working with standard elements in React JSX one must add the 'touch-action' attribute after the component has mounted as non-standard attributes will not be rendered.

eg. this will not render the 'touch-action' attribute:

  render() {
    <div touch-action="none">does not emit events</div>
  }

Whereas this works fine:

  componentDidMount() {
    this.refs.test.setAttribute('touch-action', 'none');
  }

  render() {
    <div ref="test">emits events</div>
  }

This may be too specific specific to include in the documentation, but I thought it might be helpful for those who have run into the same problem.

[jzaefferer]

Once #151 is implemented we no longer need the non-standard attribute. So hopefully this issue is obsolete soon.

[scottgonzalez]

We decided that this can be added to the README, in a section similar to Using PEP with jQuery. Can you send a PR adding that?

[MilllerTime]

I wrote a React component that allows declarative pointer event binding, and setting of the touch-action attribute for PEP. No need to manage anything in lifecycle hooks across multiple components 🙂

It has been working for me as an easy substitute until React officially supports pointer events. Even then, it may be handy for the touch-action attribute if Safari keeps holding out on pointer events.

Update: <Pointable /> now lives in its own repo and is on npm:
https://www.npmjs.com/package/react-pointable

This doesn't resolve the documentation issue, but hopefully is helpful.

[scottgonzalez]

I'm going to close this. If someone wants to send a PR with documentation, we can certainly add it.

[MilllerTime]

Hey @scottgonzalez, I'm afraid any explanation to do this the right way gets pretty lengthy if all bases are to be covered. While it's easy to make a React component that binds pointer events and sets touch-action based on initial props, the beauty of React is how it can reconcile changes to a component over its lifetime. However since pointer events and touch-action aren't supported by React, it won't do this reconciliation. In order to build a component that responds gracefully to changes in pointer event binding and touch-action (like React normally does with other props), one must implement their own internal diffing of these properties and make the minimal corresponding changes to the DOM manually.

I think it's a lot of overhead if someone just wants declarative pointer event binding to work. So, this is exactly what <Pointable/> does under the hood. A user can bind pointer events exactly like other React events. The main difference is that instead of getting synthetic event objects from React, the handlers will receive events directly from the browser, or PEP.

I've written unit tests for the internal diffing code, and haven't experienced any issues in my real-world usage.

If you're open to linking to an external package for React support, I'm happy to write up a usage example for it, and stand behind the package.

[scottgonzalez]

If you're open to linking to an external package for React support, I'm happy to write up a usage example for it, and stand behind the package.

Absolutely. Can you send a PR that adds a link with a short blurb? Just a sentence or two is fine, but feel free to write more.