I have an issue with props. My render method is something like this :

render() {
        const language = this.props.language.default.portal;
        const cars = this.props.cars;
        const favorites = this.props.favorites;
        const cartContent = this.props.cartContent;
        const addToFavorites = this.props.addToFavorites;
        const removeFromCard = this.props.removeFromCard;
        const addToCard = this.props.addToCard;
        const handleOffers = this.props.handleOffers;
        const offers = this.props.offers;
        const currentUserEmail = getUserEmail();

        return (
            <div className="cars">
                    <div>
                        <Shuffle>
                        {cars.map((car, i) => {
                            const initialReg = car.initialRegistration.slice(0,3) + car.initialRegistration.slice(6,10);
                            // str.slice(1, 4) extracts the second character through the fourth character (characters indexed 1, 2, and 3)

                            return (
                                <div key={i} className="carBox noPadding">
                                    <div className="carBoxContent">

                                        <PhotoAndFavorites car={car} language={language} changeStarIcon={this.changeStarIcon} addToFavorites={addToFavorites} userEmail={currentUserEmail} favorites={favorites}/>

                                        <div className="carNameAndDesc">
                                            <div><Link to="" style={{textDecoration: 'none'}}>{car.make}</Link></div>
                                            <div>{car.desc}</div>
                                        </div>

                                        <div className="carPrice">
                                            <div>{car.price}</div>
                                            <div>{car.btw}</div>
                                        </div>

                                        <div className="extraFeatures" style={{marginBottom: 5, backgroundColor: '#eee'}}>

                                        </div>

                                        <div className="mainFeatures">
                                            <div><img src="../images/portal/user/status/fuel-icon.png" style={{height: 12}}/> <span>{car.fuel}</span></div>
                                            <div><img src="../images/portal/user/status/road-icon.png" style={{height: 12}}/> <span>{car.mileage}</span></div>
                                            <div><img src="../images/portal/user/status/calendar-icon.png" style={{height: 12}}/> <span>{initialReg}</span></div>
                                        </div>

                                        <Buttons car={car}
                                                 language={language}
                                                 changeButton={this.changeButton}
                                                 addToCard={addToCard}
                                                 removeFromCard={removeFromCard}
                                                 cartContent={cartContent}
                                                 userEmail={currentUserEmail}
                                                 handleChange={handleOffers}
                                                 offers={offers}
                                                 opacity={this.props.opacity}
                                                 />

                                    </div>
                                </div>
                            );
                        })}
                        </Shuffle>
                    </div>
                <div className="clearfix"/>
            </div>
        );
    }

But the animation doesn't happening and I'm getting warning
bundle.js:8394 Warning: Unknown props duration, fade, initial on div tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

Hi,

I have a system a sort gird with some value , but how can i define shuffle a grid by values Asc & Desc.??

Please advice

Looks cool -- for react.rocks -- thanks!

I'm getting this error upon second rendering of the component.

Even when I make a simple list like:

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

My re-render is triggered by a change in my Redux store. When I disable the connection to my store everything works. Any suggestions?

Hi, I'm using baobab and my code works nice but today I was trying include react-shuffle and I notice than I'm receiving some errors

 Uncaught TypeError: Cannot read property 'createFacet' of undefined

I checked the error in google and end

github.com/Yomguithereal/baobab-react/issues/52

"this error occur because the rendered children has not access to the same context as set by your root component."

it's not so clear to me, context is a new (and not so much documented) feature and I can't understand how sort this problem

now, I also notice than you're actually using cloneWithProps which is the way suggested there

but seems than cloneWithProps is deprecated

now you can use https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement which keep the ref

I'm not a react expert, so I can't understand so much about it.

I hope you can understand better the problem and can give me a clue about how solve it, thanks!

When I use the component from react-router (latest version) inside a , the links stop working after the first re-render (remix-run/react-router#2403)

Since this works without the shuffle, this is an issue with react-shuffle.

Do you see a place where some props could be possibly overwritten?

I don't understand how one should see the demo in demo folder?

1. Is it using ES6 import/export stuff? You are aware it's not supported in any browser, yet, right?
2. The js file referenced in html file is not the one next to the file

First of all, thanks for creating this! I've been desperately waiting for Ryan Florence to update his MagicMove library but it just wouldn't happen. So I'm really glad you stepped in and did some refactoring while at it.

I've got a pesky issue with your lib though: The children sorting. From both your example and the sources I assume that the ordering of child elements within the Shuffle container will be made by "greater-than" comparisons using the component's key attribute.
This seems to produce issues as React appears to use the key attribute as a unique identifier for a component.

Let me elaborate. Imagine the following racing situation UI:

[driverID: 3, pos: 3] <--- 1.8 s ---> [driverID: 2, pos: 2] <--- 0.7 s ---> [driverID: 1, pos: 1]

Since the drivers don't change in this scenario their IDs are used as the component's key attribute. React-shuffle would reorder my list and mess the position order up (3 being greater than 2, 2 being greater than 1).
As a workaround I use key={1000-pos} to get the right order. (we'll revisit this later)

I want to animate this inline-block list whenever any driver overtakes another driver, resulting in a position change. Like so:

[driverID: 3, pos: 3] <--- 2.1 s ---> [driverID: **1**, pos: 2] <--- 0.1 s ---> [driverID: **2**, pos: 1]

(the divs containing drivers 1&2 information are supposed to change positions in an animated way)

However, since I'm using {1000-pos} as the key attribute, the drivers are no longer considered the unique components. Therefore, React will merely swap the affected components' contents instead of actually rearranging the components. And thus, React-Shuffle won't animate anything because it was not the driver components' order that changed but their contents.

Introducing support for an attribute to order Shuffle's children, or for replacing the proprietary sorting function, could probably solve this issue.

I can't get this to work with Browserify since you have a peer dependency on react v0.14.0, which as far as I can tell from the React GitHub repo, isn't out yet (current release is 0.13.3). Is there any reason you're requiring a version higher than the latest stable release?

Real shame, I'd love to use this in my app!

Wait for quick release. Current version with React 0.13 produce a lot of warnings because of cloneWithProps and context.

@kenwheeler

I have a client using a rails asset pipeline without NPM, we just want the build to produce a standalone file.

Uncaught ReferenceError: exports is not defined

I use Flummox, so every component has flux context.

But If I will wrap them to <Shuffle> I will get warning from React:

Warning: owner-based and parent-based contexts differ (values: `[object Object]` vs `undefined`) for key (flux) while mounting Social (see: http://fb.me/react-context-by-parent)

Hey, I installed the library in a react-native application, however when I try to run it I get this error:

Is this because the library is not supporting react-native, or have I done something wrong?

React Shuffle logic is to have hidden block with real controls and visible block for animation with position: absolute on top of that hidden block.

But, as result, there is no comtainer size animation, when we delete item.

Example: this is my UX:

When I will delete one of item, “minus” button will move immediately to the left. Because “minus button” is out of Shuffle container and Shuffle container size has no animation.