https://react-resizable-panels.vercel.app/assets/UseGridRefRoute-B3ZmrQXI.js

1import{j as s,P as a,Q as n,q as p,R as t,b as o,L as e}from"./index---B6UPLJ.js";function c(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(n,{section:"Hooks",sourceCodePath:"lib/components/grid/useGridRef.ts",title:"useGridRef"}),s.jsxs("div",{children:["The ",s.jsx("code",{children:"useGridRef"})," hook returns a"," ",s.jsx(p,{href:"https://react.dev/reference/react/useRef",children:"mutable ref object"}),"."]}),s.jsx(t,{html:'<div><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">Grid</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">useGridRef</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-resizable-panels"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div>&nbsp;</div>\n<div><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">ExampleComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div><span class="">  </span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">ref</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridRef</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div>&nbsp;</div>\n<div><span class="">  </span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">ref</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">rest</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div><span class=""></span><span class="tok-punctuation">}</span></div>'}),s.jsxs(o,{intent:"warning",children:["This component is useful for situations where you only need a local (to your component) reference to the"," ",s.jsx(e,{to:"/imperative-api/grid",children:"imperative Grid API"}),". If you need to share the ref with another component or hook, use the"," ",s.jsx(e,{to:"/hooks/use-grid-callback-ref",children:"callback ref hook"})," ","instead."]})]})}export{c as default};
2//# sourceMappingURL=UseGridRefRoute-B3ZmrQXI.js.map