React.js and Isotope.js

Question

I\'m checking out React.js and trying to figure out how this library can work together with Isotope.js. The documentation of React says that it plays nicely with other libra

Answer 1

You need to create new Isotope object on componentDidMount and reload items on componentDidUpdate.

Use my mixin to figure it out :)

Answer 2

You can manipulate the dom directly inside React. This permits to integrate existing JS libraries or for custom needs not handled well by React.

You can find an exemple here:

https://github.com/stample/gulp-browserify-react-phonegap-starter/blob/master/src/js/home/homeComponents.jsx#L22

And here's what it looks like:

---

The problem with integration of React and a library like Isotope is that you will end up having 2 different libraries trying to update the same dom subtree. As React work with diffs, it kind of assumes that it is alone modyfing the dom.

So the idea could be to create a React component that will render only one time, and will never update itself. You can ensure this with:

shouldComponentUpdate: function() { 
    return false; 
}

With this you can:

• Use React to generate your isotope item html elements (you can also create them without React)
• On componentDidMount, initialize isotope on the dom node mounted by React

And that's all. Now React will never update this part of the dom again, and Isotope is free to manipulate it like it wants to without interfering with React.

In addition, as far as I understand, Isotope is not intented to be used with a dynamic list of items so it makes sense to have a React component that never updates.