Context behaviour like Portals about nano-slots HOT 4 CLOSED

Hey @exah, thanks for answering me!

I figured out that Portals won't solve it as well, as the context Provider has to be wrapping the whole component tree, and with react-router Routes component you end up with multiple nested contexts not necessarily wrapping both the Layout and the logically nested sections.

I wrote a similar solution as you suggested (just a little more complicated because react-router v6 isn't exposing the routing context, but maybe that's something I could ask!) :

// This Fill component will enable relative routing within the Layout
// as if we were at the logical layer from which the component was sent
const Fill = (
  props: React.ComponentProps<typeof DefaultFill> & {
    children: React.ReactElement;
  }
) => {
  // get the current pathname, like /projects/123/infos
  const { pathname } = useResolvedPath("");
  const { children, ...rest } = props;

  return (
    <DefaultFill {...rest}>
      {/* Define a new routing context with the current pathname as the basename */}
      <Routes basename={pathname}>
        {/*
           Render the component under an always matched route
           Now we can use <Link to="members"/> within the "children" and it will point to "/projects/123/infos/members"
         */}
        <Route path="*" element={children} />
      </Routes>
    </DefaultFill>
  );
};

from nano-slots.

FYI, I was able to properly forward the context by patching react-router so I can export their RouteContext : remix-run/react-router#7933 (comment)
I'll apply my patch until they expose the context officially 🤞.

from nano-slots.

Hey @jgoux,

This is really a question! Sadly react (at least to my knowledge) doesn't provide any way to get a context and move it somehow together with an element. Only rewriting the implementation to use ReactDOM.createPortal will work. I'm afraid in this case it will not be possible to use the library without react-dom and it might result in increasing the bundle size.

I will think about it, thanks :)

from nano-slots.

Right now, as a workaround, you can do something like this:

function MyContextAwareFill({ name, children }) {
  return (
    <MyContext.Consumer>
      {(contextValue) => (
        <Fill name={name}>
          <MyContext.Provider value={contextValue}>
            {children}
          </MyContext.Provider>
        </Fill>
      )}
    </MyContext.Consumer>
  )
}

(But only if the library exposes its context)

from nano-slots.