{"action":"created","issue":{"url":"https://api.github.com/repos/metafizzy/flickity/issues/381","repository_url":"https://api.github.com/repos/metafizzy/flickity","labels_url":"https://api.github.com/repos/metafizzy/flickity/issues/381/labels{/name}","comments_url":"https://api.github.com/repos/metafizzy/flickity/issues/381/comments","events_url":"https://api.github.com/repos/metafizzy/flickity/issues/381/events","html_url":"https://github.com/metafizzy/flickity/pull/381","id":155719317,"number":381,"title":"A patch to intergrate Flickity with React","user":{"login":"oxpa","id":1932978,"avatar_url":"https://avatars.githubusercontent.com/u/1932978?v=3","gravatar_id":"","url":"https://api.github.com/users/oxpa","html_url":"https://github.com/oxpa","followers_url":"https://api.github.com/users/oxpa/followers","following_url":"https://api.github.com/users/oxpa/following{/other_user}","gists_url":"https://api.github.com/users/oxpa/gists{/gist_id}","starred_url":"https://api.github.com/users/oxpa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oxpa/subscriptions","organizations_url":"https://api.github.com/users/oxpa/orgs","repos_url":"https://api.github.com/users/oxpa/repos","events_url":"https://api.github.com/users/oxpa/events{/privacy}","received_events_url":"https://api.github.com/users/oxpa/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2016-05-19T11:57:17Z","updated_at":"2016-05-19T15:40:45Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/metafizzy/flickity/pulls/381","html_url":"https://github.com/metafizzy/flickity/pull/381","diff_url":"https://github.com/metafizzy/flickity/pull/381.diff","patch_url":"https://github.com/metafizzy/flickity/pull/381.patch"},"body":"Hello. \r\nFirst of all, I have to admit, I'm not a js programmer. I have no knowledge of npm or whatever. So this is more a feature request than a pull request =)\r\nStill, this pull request consists of two changes. \r\nThe first one introduced 'noDomMod' option for Flickity. This option prevents DOM modifications inside Flickity. \r\nWhy would anyone need this? When I used Flickity with React I realized, Flickity changes DOM and React fails (because React checks that DOM matches React's internal shadow DOM). The change Flickity made is trivial: only two div elements are added and cells are moved into them.\r\nSo the noDomMod patch is about basic react compatibility. In my case, I used react to filter out only matching tabs. But here is a simplier example, which just adds and removes cells:\r\nhttp://codepen.io/anon/pen/VaJjmd  (sorry for a ton of JS, but this is how I'm using react...)\r\n\r\nBut there are several problems with this rendering. As you might notice, in the demo I'm using `.activate()` and `deactivate()` while I would prefer `.reloadCells()`.  First of all, reload doesn't update dots. And I didn't work around this issue. Secondly, reload mess with cells if I don't reset before and after wrap arrays. And this is the second commit: normalize wrapping behaviour on external DOM management.\r\n\r\nSo, basically, could anyone please review this and propose a `reloadCells` better patch?\r\n(I read the contributing guideline, and lets agree, this is a mit licensed pull request)"},"comment":{"url":"https://api.github.com/repos/metafizzy/flickity/issues/comments/220364595","html_url":"https://github.com/metafizzy/flickity/pull/381#issuecomment-220364595","issue_url":"https://api.github.com/repos/metafizzy/flickity/issues/381","id":220364595,"user":{"login":"oxpa","id":1932978,"avatar_url":"https://avatars.githubusercontent.com/u/1932978?v=3","gravatar_id":"","url":"https://api.github.com/users/oxpa","html_url":"https://github.com/oxpa","followers_url":"https://api.github.com/users/oxpa/followers","following_url":"https://api.github.com/users/oxpa/following{/other_user}","gists_url":"https://api.github.com/users/oxpa/gists{/gist_id}","starred_url":"https://api.github.com/users/oxpa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oxpa/subscriptions","organizations_url":"https://api.github.com/users/oxpa/orgs","repos_url":"https://api.github.com/users/oxpa/repos","events_url":"https://api.github.com/users/oxpa/events{/privacy}","received_events_url":"https://api.github.com/users/oxpa/received_events","type":"User","site_admin":false},"created_at":"2016-05-19T15:40:45Z","updated_at":"2016-05-19T15:40:45Z","body":"@desandro  afaik, Flickity can't work in a server environment at least because it uses client side features moving slides back and forth. But this is not the case ;) \r\nI also don't propose removing DOM operations totally. But to have a way to tell Flickity that environment is set up as Flickity would need: a viewport, with slider, with cells inside. Just like Flickity assumes there are cells inside anchor element.\r\n\r\nBy the way, initially, I used `reloadCells`, and it almost worked ;) But iit doesn't really reload cells. It does a part of this realoading, while deactivate-activate does this task better...\r\n\r\n@PaoloFalomo I'm not the first one. There is at least one gist in google for this =)\r\nhttps://github.com/theolampert/react-flickity-component of @theolampert \r\nhttps://gist.github.com/JoshBarr/f302ebf7f43ea596ad6a of @JoshBarr\r\n\r\nBoth of those assumes cell configuration is static. While if you have to filter out some cells and reload them, Flickity behaves not that well as you might want it ...\r\n\r\nSo, as a resume: this is not intended to be in a server side render. Nor this is a replacement for DOM manipulation in Flickity. This is a small feature to delegate some work to an outside framework."}}