ryanflorence / react-magic-move Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
could you make this project as typescript so developer can use it in typescript project ๐
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 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 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?
I assume should be removed from the deps
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's
rendermethod). 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?
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.
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
$ bower install react-magic-move
bower ENOTFOUND Package react-magic-move not found
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?
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?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.