paol-imi / react-reparenting Goto Github PK

Great work on this! Would be interested in helping bring support to react-native, if you think it could be possible. Any ideas on where to start?

I want to reparent a element to another parent which need to conditional render. For example when router change, I want to reparent a element from A page to B page, but I found that if I do that, it will unmount. Here is the example, it is possible to do that? thanks!

When moving from local hosting to real server, the library surprised us with this error:

Any ideas how to solve it?

Thanks, Maciek

I recently started using react-reparenting and it was a huge win. Thank you so much.

However, I'm sometimes getting an error in the render after reparenting. I assume I'm doing something bad but I'm not sure what it is. I'm continuing to investigate, but I thought I'd post the error here in case anyone has seen it before and has some useful information.

Uncaught Error: Expected to find a host parent. This error is likely caused by a bug in React. Please file an issue.
    at unmountHostComponents (react-dom.development.js:21259)
    at commitDeletion (react-dom.development.js:21347)
    at commitMutationEffects (react-dom.development.js:23407)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23121)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
    at performSyncWorkOnRoot (react-dom.development.js:22329)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at discreteUpdates$1 (react-dom.development.js:22420)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

Thanks.

First of all, awesome library. Thanks very much for this.
I have a use case where I have big stream player in a channel just like twitch. When moving away from the channel, the player should be now be seen in a small player at the bottom. For this, I have setup of global component at top. I need to reparent the big player from channel to this global component. I was able to do that successfully, but the child has different styles (like height for example) when it's big in channel versus in small player.

How can I achieve this ? Is it possible to add new props to the very child ? or Classes ? while re-parenting ?

I tried using this package so that I can move my audio component (a React.FC which holds html audio tag) into different nodes without re-rendering during audio playback, however following the documentation I believe I have setup everything correctly however, the audio component still seems to re-render and interrupt playback. I've tried wrapping my component in React.memo(), I've also tried using skipUpdate = true (which just causes react errors) when using sendReparentableChild(). My use case is that when the user clicks music tab I want to show them our audio component, but when that tab is not open I want audio player to play anyway (kind of like in the background). I can do something similar to this using portals, and html audio element control parameter but I can't insert it into correct parent component node position when my tab opens/closes. Thanks for the interesting library anyway, I'm sure it works with other more basic elements.

I tried to have look at the examples on codesandbox but I'm facing some errors.
The examples on codesandbox seem to have some errors.
Is this also happening with yours too?

Just wanted to open the issue to track it, if I get a chance later today I'll setup a code sandbox.

Hi! I'm receiving compile errors when im importing Reparentable. This is on a fresh new Create React App with Typescript.

`TypeScript error in /Users/node_modules/react-reparenting/dist/types/core/addChild.d.ts(1,13):
'=' expected. TS1005

1 | import type { Fiber } from 'react-reconciler';
| ^
2 | /**
3 | * Add a child fiber in a parent fiber and return the index in which it is added.
4 | * The position can be chosen by providing a key (string) or by providing an index (number).`

Deleted the tsconfig file and everything started to work.

The docs currently say this package cannot be used in production build with React v17.

Is this still true or are there any updates?

Thanks :)

Looks like the peer dependency is preventing me from installing this in my project?

Ill probably fork and use but I figured Id report

Hello,

I was wondering if this library would be usable to directly render a component to another place in the render tree, à la https://github.com/javivelasco/react-tunnels#react-tunnels ? So in my case I would like to send the component to the other place without mounting it locally I guess?

My use case is being able to declare "slots" in my Layout that I can fill from children deep in the tree to have like contextual menus depending on the current page without unmouting/remounting the Layout, so I can have animated page transitions as a bonus!

When I try to build a production with any mention of tag <Reparentable>, the app throwing error with the message "invariant failed".

Hi, thank you so much for putting the effort into building this! I think this would be super useful if it was a little more declarative in line with other modern libraries like react-dnd and react-spring. Calling sendReparentableChild manually is a side effect and makes it much harder to use the library.

My suggestion is to have something like this:

const Example = ({ showParentA, }) => {
  const { child } = useReparentable({
    child: <Child/>
  })

  return (
    showParentA
    ? <ParentA>
        {child}
      </ParentA>
    : <ParentB>
        {child}
      </ParentB>
  )
}

In the example above, child would be stored in memory so it can be passed around to components that render conditionally. Having a hook that handles "sending" to different parents would make this library much more intuitive. I could see it being something as simple as that hook calling sendReparentableChild under the hood, with slightly more functionality to make it work for conditional rendering.

Just food for thought!