From 4a7aaefa8de2f3d7e124512194b686b3e2cac618 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 30 Dec 2023 09:17:08 -0500
Subject: [PATCH] Update README example to show imports

---
 README.md                                 | 15 +++++++++++++--
 packages/react-resizable-panels/README.md | 13 ++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

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 (
     <PanelGroup direction="horizontal" id="group">
       <Panel id="left-panel">{/* ... */}</Panel>
-      <PanelResizeHandle />
+      <PanelResizeHandle id="resize-handle" />
       <Panel id="right-panel">{/* ... */}</Panel>
     </PanelGroup>
   );
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 (
     <PanelGroup direction="horizontal" id="group">
       <Panel id="left-panel">{/* ... */}</Panel>
-      <PanelResizeHandle />
+      <PanelResizeHandle id="resize-handle" />
       <Panel id="right-panel">{/* ... */}</Panel>
     </PanelGroup>
   );