diff --git a/README.md b/README.md index 7f0238144..5adb5b1be 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,15 @@ No. Pixel-based constraints [added significant complexity](https://github.com/bv No. I think exposing two refs (one for the component's imperative API and one for a DOM element) would be awkward. This library does export several utility methods for accessing the underlying DOM elements though. For example: ```tsx +import { + getPanelElement, + getPanelGroupElement, + getResizeHandleElement, + Panel, + PanelGroup, + PanelResizeHandle, +} from "react-resizable-panels"; + export function Example() { const refs = useRef(); @@ -35,19 +44,21 @@ export function Example() { const groupElement = getPanelGroupElement("group"); const leftPanelElement = getPanelElement("left-panel"); const rightPanelElement = getPanelElement("right-panel"); + const resizeHandleElement = getResizeHandleElement("resize-handle"); // If you want to, you can store them in a ref to pass around refs.current = { groupElement, leftPanelElement, - rightPanelElement + rightPanelElement, + resizeHandleElement, }; }, []); return ( {/* ... */} - + {/* ... */} ); diff --git a/packages/react-resizable-panels/README.md b/packages/react-resizable-panels/README.md index ffc4c94b8..3b4b3396c 100644 --- a/packages/react-resizable-panels/README.md +++ b/packages/react-resizable-panels/README.md @@ -178,6 +178,15 @@ No. Pixel-based constraints [added significant complexity](https://github.com/bv No. I think exposing two refs (one for the component's imperative API and one for a DOM element) would be awkward. This library does export several utility methods for accessing the underlying DOM elements though. For example: ```tsx +import { + getPanelElement, + getPanelGroupElement, + getResizeHandleElement, + Panel, + PanelGroup, + PanelResizeHandle, +} from "react-resizable-panels"; + export function Example() { const refs = useRef(); @@ -185,19 +194,21 @@ export function Example() { const groupElement = getPanelGroupElement("group"); const leftPanelElement = getPanelElement("left-panel"); const rightPanelElement = getPanelElement("right-panel"); + const resizeHandleElement = getResizeHandleElement("resize-handle"); // If you want to, you can store them in a ref to pass around refs.current = { groupElement, leftPanelElement, rightPanelElement, + resizeHandleElement, }; }, []); return ( {/* ... */} - + {/* ... */} );