I am hitting some of the same issues that others have reported, especially #8.

Based on the lack of responses by the author to other issues, I'm guessing this library has been abandoned. It would be nice to document that fact in the README so others don't waste time trying to get it to work.

I assume should be removed from the deps

When I try to use React Router's <Link /> component inside a <MagicMove /> container, it breaks.

Warning: Required context `isActive` was not specified in `Link`.

I believe this is because the cloned links are in a totally separate different render tree, so they cannot access context provided by the router. One of the downsides of portals, I suppose.

I can't think of a good solution. The only one that comes to mind is to provide an interface to dynamically create the MagicMove class, so that you can insert a static contextTypes property as needed. But that's gross, right?

could you make this project as typescript so developer can use it in typescript project 😅

Hi! I want to use react-magic-move in my app. The catch is that I'm compiling everything with webpack and using the exclude option to prevent compiling every dependency.

My webpack.config.js looks like this:

module: {
    loaders: [
      { test: /\.js$/, loaders: ['react-hot', 'babel?experimental'], exclude: /node_modules/ }
    ]
}

When I try to build a file with require('react-magic-move') I get this error:

ERROR in ./~/react-magic-move/modules/components/MagicMove.js
Module parse failed: /Users/hugo.bessa/Sites/copag-cartas/node_modules/react-magic-move/modules/components/MagicMove.js Line 8: Unexpected token (
You may need an appropriate loader to handle this file type.
|   displayName: 'MagicMoveClones',
|
|   childrenWithPositions () {
|     var children = [];
|     React.Children.forEach(this.props.children, (child) => {
 @ ./~/react-magic-move/modules/index.js 1:17-50

As I'm excluding my dependencies from the build step, and react-magic-move is exporting an ES6 module, the build step is failing.

Can react-magic-move export an ES5 CommonJS bundle or should I change my webpack configs?

I had this issue using this module:

https://gist.github.com/hayksaakian/a019adf9fb970fd320fd

and freenode#node.js suggested this:

15:28 @ljharb hephaestus_rg: that's using es6 concise method syntax
15:28 @ljharb hephaestus_rg: that won't work unless it's transpiled.
15:29 < hephaestus_rg> oh that seems like something that would be important to specify in the readme...
15:29 < Sorella> hephaestus_rg: oh, you should open an issue on their repository telling them to compile the module before publishing it to npm

Maybe I'm missing something. but it seems like a straightforward problem.

Hi Ryan, I am studying react-magic-move and would like to understand why you need a portal with manually positioned children. Can you write a few sentences about why it's coded this way and what isn't possible with just css transitions?

I'd like to get the examples working in jsfiddles; to that end my understanding is that it should be possible to include the dist/react-magic-move.js script as a normal script reference, after the usual React support scripts (including the in-browser JSXTransformer).

However, my minimally-adapted version of the basic ('States') example on top of the "React Base Fiddle (JSX)" is triggering an odd React invariant error near the wrapup of the initial render: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component'srendermethod). Try rendering this component inside of a new top-level component which will hold the ref.

The component-setup code is unchanged, so any owner-setup should still work. I thought it might be a problem specific to JSFiddle's panel setup, so I tried an entirely local-files setup – same error. I'm now thinking it may be a namespace issue arising from not loading-via-require()s, or an incompatibility with in-browser JSXTransformer use. (If the problem is either of these, it might merit a dist-script fix or doc note.)

You can view the error-triggering setup at: http://jsfiddle.net/69z2wepo/4692/

Any ideas?

Yes, you might be asking yourself 'what??? there are people out there not using Module Loaders?'. But yeah, you are correct. I am not using RequireJS or any similar Environment.

And correct me if i'm wrong, for this - lets call it Component - a Module Loader is required, because i am getting the Error - Uncaught ReferenceError: MagicMove is not defined

This Library seems freaking awesome, i would love to give it a try :)

thanks for the help

npm ERR! peerinvalid The package react does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]
npm ERR! System Linux 3.13.0-43-generic
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install" "react-magic-move" "--save"
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! code EPEERINVALID
npm ERR!

I was able to get this working with html elements(div, li, etc) however if I tried to animate a sub-component ( )it would not work. Is this a known limitation?