Support for React 0.14

[ingk]

Are there any efforts to support React 0.14?

It seems the only problem is that react-fastclick uses EventListener from the react package which is not available any longer. I get the following error:

Error: Cannot find module 'react/lib/EventListener' from '<path_to_my_project>/node_modules/react-fastclick'

[JakeSidSmith]

I hadn't got round to testing with 0.14 yet, but I'll give it a go when I have some time.

[catalinux]

At least two changes: var EventListener = require('react/lib/EventListener'); goes into var EventListener = require('fbjs/lib/EventListener');

and React.initializeTouchEvents(true); should be deleted

[powdahound]

:+1:

[JakeSidSmith]

Thanks for that @catalinux . I've been super busy recently, so have not had time to do much investigation. Would like to sort out #13 before I release a version for 0.14, but I'm looking into it right now. :)

[JakeSidSmith]

So, I decided to give that a go today. Despite event listener not looking like it's changed, fastclick does not work with react 0.14 out of the box (after having made your changes).

In fact it does not appear to add any touch listeners from fastclick at all. :/

Will have to take some time to look into this, though I had already had an idea for an alternative way to add touch listeners. Would like to experiment with both. :)

[JakeSidSmith]

Don't think I'll be using this anymore: fbjs/EventListener

Instead I'll look into extending their existing react/TapEventPlugin

And inject it with injectEventPluginsByName

[JakeSidSmith]

Note to self: https://github.com/callemall/material-ui/blob/master/examples/browserify-gulp-example/src/app/app.jsx

[sspross]

+1

[javiayala]

Hi @JakeSidSmith, how is the progress to support 0.14 going? Any updates?

[sspross]

@javiayala I'm using https://github.com/zilverline/react-tap-event-plugin in the meantime, maybe it works for you too.

[catalinux]

I see that a new package came around: https://www.npmjs.com/package/react-tap-or-click

[sspross]

thanks for pointing out!

[JakeSidSmith]

Sorry, guys. I've been crazy busy recently.

If anyone wants to give this a go and open a PR that'd be awesome. Otherwise I'll try to get to this as soon as I can.

[JakeSidSmith]

I have a solution. Going to publish in a second. Would be great if some of you could test it for me. :)

[JakeSidSmith]

Open PR: https://github.com/JakeSidSmith/react-fastclick/pull/16

Add "react-fastclick": "git://github.com/jakesidsmith/react-fastclick.git#react-0.14-support" to your dependencies for testing.

If anyone could confirm this works on older versions of react that'd be great too. :)

Once I've got some confirmations that this works I'll publish it.

[lo1tuma]

I don’t use a react version < 0.14, but I can confirm that it works correctly with react 0.14.3. Apart from that, is it necessary to provide backwards-compatibility to old react versions? Instead you could recommend in the README.md to use an older version of react-fastclick if someone wants it to be compatible with an old react version.

[JakeSidSmith]

@lo1tuma unfortunately I don't think my PR works correctly. Had some weird side effects. I'll have to take another look before I merge anything.

[moodysalem]

Hey there. My implementation of the FastClick functionality in a React component doesn't use any internal React stuff. Just wraps a div around your components and watches touch events. Might be the way to go.

https://github.com/moodysalem/react-fastclick

[JakeSidSmith]

I see what you're going for. One of my idea is similar, but still uses React touch event plugin... unfortunately the touch event plugin doesn't appear to work quite like a regular click, which is why I'm kind of stumped at the moment.

I'll push one of my ideas to a new branch tomorrow (if I have time) and would be good to get some people testing it (preferably on large scale projects). Will keep you updated. :)

[moodysalem]

If that doesn't work out, I added karma testing and CI to react-fastclick-alt

[JakeSidSmith]

@moodysalem your concept has inspired me. I have an idea for a way to automatically wrap all components with onClick handlers, with another component (like yours), except it wouldn't need to render the additional span.

I'm not going to have time to sort today, and to be honest I'm not sure when I will, but I'll try to make time whenever I can.

[JakeSidSmith]

Okay, I couldn't sleep for thinking about this issue, but I think I'm on to something really amazing.

Concept is working awesomely. It already should fix #13.

And should be backwards compatible to at least 0.13 / 0.12 (I can't remember which).

Also, no longer triggers fastclicks for elements that have been: removed, hidden, or just moved out of the way.

[JakeSidSmith]

Work in progress: https://github.com/JakeSidSmith/react-fastclick/pull/17

This seems to work incredibly well, except with react-router (specifically the Link component) although this may be to do with redux-router, I haven't had a chance to test without redux yet.

If anyone's got some time to test this, that'd be awesome. Working on a fix for react-router / redux-router at the mo.

[JakeSidSmith]

17

Have refactored again and fixed issues with react-router, redux-router and another issue with how react internally handles links.

Seems to work perfectly. Tested on 2 of my company's largest projects & my comprehensive testing project, and cannot see any immediate issues. Would be awesome to get some of you to try this version out & confirm that it's working nicely.

Update your package.json

"react-fastclick": "git://github.com/jakesidsmith/react-fastclick.git#refactor-for-0.14"

Include react-fastclick

require('react-fastclick');
// or if you're using ES6
import 'react-fastclick';

If anyone is using an older version of react / has an older project they could test it with, that'd be a bonus too. :)

[gunn]

Where do the conflicts between react and fastclick come from? The naive approach:

  ('ontouchstart' in window) && window.addEventListener('load', () => {
    FastClick.attach(document.body)
  })

Is working fine in my moderate project.

[JakeSidSmith]

There are no conflicts with React & fastclick, but there is some weird behaviour when using the standard fastclick library e.g. clicking on elements that you did not press, if the element moves under your touch, or still triggering clicks on elements that are removed from the DOM or hidden during your touches.

My latest implementation of react-fastclick should fix all of these issues.