Suppose we have two sibling react ponents called OldContainer and NewContainer. There is a child ponent inside OldContainer that contains a <video> tag, and the video is currently playing.

The user can now drag the child ponent (with the video) and drop it in the NewContainer, and they expect the video to keep playing while it's being dragged and after being dropped.

So the video appears to stick to the mouse position, and when dragged and dropped in the new container, it animates to its new position (again, it doesn't get paused).

How would you implement this? Can we implement this in a pure way (in line with the spirit of pure functions)?

Clarification: I could have used some other element instead of a video tag for explaining this problem. A NumberEasing element would be a better example, since it would require the props and state of the ponent to be preserved during and after the interaction.

Update 1: Code examples obviously would be nice, but what I'm mainly looking for is just a general description of how you would approach this problem in a "functional" way. How do you keep your view code simple and easy to reason about? Who handles the drag-and-drop gesture? How do you model the data that's fed into the views?

Suppose we have two sibling react ponents called OldContainer and NewContainer. There is a child ponent inside OldContainer that contains a <video> tag, and the video is currently playing.

The user can now drag the child ponent (with the video) and drop it in the NewContainer, and they expect the video to keep playing while it's being dragged and after being dropped.

So the video appears to stick to the mouse position, and when dragged and dropped in the new container, it animates to its new position (again, it doesn't get paused).

How would you implement this? Can we implement this in a pure way (in line with the spirit of pure functions)?

Clarification: I could have used some other element instead of a video tag for explaining this problem. A NumberEasing element would be a better example, since it would require the props and state of the ponent to be preserved during and after the interaction.

Update 1: Code examples obviously would be nice, but what I'm mainly looking for is just a general description of how you would approach this problem in a "functional" way. How do you keep your view code simple and easy to reason about? Who handles the drag-and-drop gesture? How do you model the data that's fed into the views?

• javascript
• reactjs

• <NewContainer container={this.refs.OldContainer} /> – Max Bumaye Commented May 18, 2015 at 11:39
• assuming we have a wrapping ponent you could always define a ref="OldContainer" (STRING!!) of a mounted ponent which can be accessed through this.refs["OldContainer"] of the wrapping ponent. passing this into the props of another ponent would take this reference I suppose? – Max Bumaye Commented May 18, 2015 at 11:41
• Actually the containers need not to know about each other. So <NewContainer container={this.refs.OldContainer} /> is irrelevant. – Aria Commented May 18, 2015 at 11:52
• why should they know about each other? – Max Bumaye Commented May 18, 2015 at 11:54
• Accessing the underlying DOM element is only part of the solution. Although I'm looking for a solution that doesn't require the ponents to directly access and manipulate their underlying DOM element, or at least provides an abstraction layer for that. – Aria Commented May 18, 2015 at 11:56

3 Answers 3

Take a look at this library : react-reverse-portal

What is it that you want to preserve? Is it Javascript objects that the ponent holds as state, or is it state in the DOM (like how long a video has played, or text selection in an input box)?

If it's just Javascript objects as state, you're better of moving the source of that state to another service (something like Flux). That way, it doesn't matter if the ponent gets recreated because it can be recreated with the state that was there before.

EDIT

The way to keep your view code simple and easy to reason about is to not keep state inside your ponents. Instead, all data that the ponent needs should be passed into the ponent as props. That way, the ponent is "pure" in that it renders the same output given the same props. That also makes the problem of wanting to reuse a ponent instance a non-issue, since it doesn't matter when the same input gives the same output.

For drag and drop, I'd suggest looking at: https://github./gaearon/react-dnd.

How you model the data you pass to view ponents is up to you and the needs of your application. The ponents shouldn't care, they should just expect to get data passed as props, and to render them. But the popular approach to dealing with this is of course Flux, and there are many libraries that implements Flux in different ways.

SECOND EDIT

Regarding if you have a subtree with hundreds of ponents that you want to move: I'd still start off by making the state external (pure ponents), and render that tree in a new place. That means that React will probably recreate that entire subtree, which is fine. I wouldn't deviate from that path unless the performance of it turned out to be horrible (just guessing that it might be horrible isn't enough).

If the performance turned out to be horrible, I would wrap that entire subtree in a ponent that caches the actual DOM tree and reuses it (if it gets passed the same props). But you should only do this when absolutely needed, since it goes against what React tries to do for you.

THIRD EDIT

About gestures: I'd start out with listening to gesture events in ponentDidMount, and in the event callback call setState on the ponent with the coordinates it should have. And then render the ponent in render with the coordinates given. React won't recreate the ponent when you call setState but it will re-render it (and diff the output). If the only thing you changed was the coordinates, it should render fast enough.

If that turns out to be too slow, like if the subtree of that ponent is huge and it bees a bottleneck to recreate the subtree of vDOM, I'd reposition the DOM node directly in a RAF-loop outside of Reacts control. And I'd also put a huge ment on why that was needed, because it might seem wierd for some other developer later.

Create a new variable using const or var. Put the instance of data using rest spread operator, update the necessary data to pass and send the data to the ponent without mutating the state of ponent.

Just like:

const data = {
...this.state.child,
new_data : 'abc'
}