Feature Request: Make library declarative

[jeremygottfried]

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!

[jeremygottfried]

FYI, check out the way it's done on https://github.com/httptoolkit/react-reverse-portal
They figured out a way to keep it declarative with InPortal and OutPortal components so they can still enforce rules related to how the component is rendered.