pass `ref = useRef<ImperativePanelHandle>(null);` down the component three

[jpainam]

Hi I'm able to programmably resize/collapse/expand a Panel when I create Panel and actions in the same component. How to achieve the same the same behavior when the actions is located in the sub component. I'm using nextjs and my app structure is as follows:

app\
    layout.tsx (PanelGroup, Panel(left), Panel(middle)) -> content of panelLeft defined and shared
    \about
         page.tsx (Content of panelMiddle/panelRight defined)
     \profile
         page.tsx (Content of panelMiddle/panelRight defined)

I would like to have access to the leftPanelRef, rightPanelRef in about/page.tsx and profile/pages.tsx. nextjs does not allow passing ref from layout to pages? I tried using jotai to manage the state, but it did'nt work.

Is there a better way to achieve this?

[bvaughn]

Refs can be passed like any other props, so long as you aren't trying to pass them using the ref keyword.

If NextJS is adding any additional constraints (that I'm unaware of) then you'll have to ask someone on that framework. That's not something I can support.

[jpainam]

According to the next 13 docs you cannot. Here too https://stackoverflow.com/questions/74573236/pass-props-to-page-jsx-child-from-root-layout-next-js-13.

The Component that handles the ref is three levels down the parent layout (where i defined the Panels). It's also not a good idea to pass props that deep into the DOM tree. One solution is to use React Context. I was thinking of something similar to useFormContext that gives you access to the current form in any nested component.

This is why i asked the question here.

This is also related to this comment https://github.com/bvaughn/react-resizable-panels/issues/29#issuecomment-1538142437

[bvaughn]

If Context is what Next suggests, then why don't you pass the ref down using the Context API (in your application code)

[jpainam]

This is just a frequent use case. Exposing a Context API from react-resizable-panel will be handy. But you already mentioned in this comment, https://github.com/bvaughn/react-resizable-panels/issues/29#issuecomment-1807171740. You had no plan for this. Thanks.