pass `ref = useRef<ImperativePanelHandle>(null);` down the component three
jpainam opened this issue · 4 comments
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?
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.
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 #29 (comment)
If Context is what Next suggests, then why don't you pass the ref down using the Context API (in your application code)
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, #29 (comment). You had no plan for this.
Thanks.