search

joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.09k stars 258 forks source link

It DOES work with stateless functional components if you wrap them with React.forwardRef #257

Closed ddfridley closed 3 years ago

ddfridley commented 3 years ago

The caveat that this doesn't work with functional components should be updated to say that the functional component needs to be wrapped like this:

const Article = React.forwardRef((props, ref) => {
 const {article}=props
  return (
    <div  ref={ref} key={article.id}>
      {article.description}
    </div>
  )
})

And I'm so glad it does! Thanks.

robations commented 3 years ago

You might have been looking at an old branch, or time travelling:

https://github.com/joshwcomeau/react-flip-move#usage-with-functional-components https://github.com/joshwcomeau/react-flip-move#gotchas

ddfridley commented 3 years ago

Thanks. Actually where I was looking was https://www.npmjs.com/package/react-flip-move If you scroll down to the Gotchas section, it does not mention forwardRef.
Also, on npm is seems to be referencing version 3.0.4 but in the github link you sent it says 3.0.3 is the latest. What's on npm is working for me but should I switch? Thanks again for the repo.

robations commented 3 years ago

@ddfridley Not my repo, I was looking into the same problem with refs and happened to see your issue.

Yeah, I've seen quite a few cases where people publish new versions on npm, but don't push the tags or commits upstream. Probably a mistake here, but similar techniques have been used in the past to conceal malicious code.

NB I switched to use https://github.com/aholachek/react-flip-toolkit which is also worth looking at.

tobilen commented 3 years ago

I merged the readme change provided by @JPeer264 back in March -> https://github.com/joshwcomeau/react-flip-move/pull/245

Only josh can update the npm package, but i figured that having an up to date readme at least in the repository is an improvement, even if the readme shipped with the package still lacks that information.

What's on npm is working for me but should I switch?

It seems to work for some people though, which is great. But you won't get me on the record telling you that it will definitely work. I second the suggestion made by @robations to migrate to https://github.com/aholachek/react-flip-toolkit, since react-flip-move is not maintained anymore.

Please reopen if you have any more questions