Skip to content

Commit c51e36e

Browse files
bvaughnbvaughn
committed
Update README
1 parent 83ee5e6 commit c51e36e

1 file changed

Lines changed: 180 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,80 @@ Documentation for this project is available at [react-resizable-panels.vercel.ap
3131

3232
<!-- Group:required:begin -->
3333

34+
<table>
35+
<thead>
36+
<tr>
37+
<th>Name</th>
38+
<th>Description</th>
39+
</tr>
40+
</thead>
41+
<tbody>
42+
</tbody>
43+
</table>
44+
3445
<!-- Group:required:end -->
3546

3647
#### Optional props
3748

3849
<!-- Group:optional:begin -->
3950

51+
<table>
52+
<thead>
53+
<tr>
54+
<th>Name</th>
55+
<th>Description</th>
56+
</tr>
57+
</thead>
58+
<tbody>
59+
<tr>
60+
<td>autoSave</td>
61+
<td><p>Remember <code>Panel</code> layouts between page reload.</p>
62+
<p>ℹ️ Layouts are saved using <code>localStorage</code> by default but can be customized using the <code>storage</code> prop.</p>
63+
<p>⚠️ The <code>id</code> prop must also be specified for auto-save groups.</p>
64+
</td>
65+
</tr>
66+
<tr>
67+
<td>children</td>
68+
<td><p><code>Panel</code> and <code>ResizeHandle</code> components that comprise this group.</p>
69+
</td>
70+
</tr>
71+
<tr>
72+
<td>className</td>
73+
<td><p>CSS class name.</p>
74+
</td>
75+
</tr>
76+
<tr>
77+
<td>direction</td>
78+
<td><p>Specifies the resizable direction (&quot;horizontal&quot; or &quot;vertical&quot;); defaults to &quot;horizontal&quot;</p>
79+
</td>
80+
</tr>
81+
<tr>
82+
<td>id</td>
83+
<td><p>Uniquely identifies this group within an application.
84+
Falls back to <code>useId</code> when not provided.</p>
85+
<p>ℹ️ This value will also be assigned to the <code>data-group-id</code> attribute.</p>
86+
<p>⚠️ This prop must be provided if <code>autoSize</code> is true.</p>
87+
</td>
88+
</tr>
89+
<tr>
90+
<td>onLayoutChange</td>
91+
<td><p>Called when panel sizes change; receives a map of Panel id to size.</p>
92+
</td>
93+
</tr>
94+
<tr>
95+
<td>storage</td>
96+
<td><p>Storage API to use for persisted layouts; defaults to <code>localStorage</code>.</p>
97+
</td>
98+
</tr>
99+
<tr>
100+
<td>style</td>
101+
<td><p>CSS properties.</p>
102+
<p>⚠️ The following styles cannot be overridden: <code>display</code>, <code>flex-direction</code>, <code>flex-wrap</code>, and <code>overflow</code>.</p>
103+
</td>
104+
</tr>
105+
</tbody>
106+
</table>
107+
40108
<!-- Group:optional:end -->
41109

42110
### Panel
@@ -45,12 +113,85 @@ Documentation for this project is available at [react-resizable-panels.vercel.ap
45113

46114
<!-- Panel:required:begin -->
47115

116+
<table>
117+
<thead>
118+
<tr>
119+
<th>Name</th>
120+
<th>Description</th>
121+
</tr>
122+
</thead>
123+
<tbody>
124+
</tbody>
125+
</table>
126+
48127
<!-- Panel:required:end -->
49128

50129
#### Optional props
51130

52131
<!-- Panel:optional:begin -->
53132

133+
<table>
134+
<thead>
135+
<tr>
136+
<th>Name</th>
137+
<th>Description</th>
138+
</tr>
139+
</thead>
140+
<tbody>
141+
<tr>
142+
<td>className</td>
143+
<td><p>CSS class name.</p>
144+
<p>⚠️ Class is applied to nested HTMLDivElement to avoid styles that interfere with Flex layout.</p>
145+
</td>
146+
</tr>
147+
<tr>
148+
<td>collapsedSize</td>
149+
<td><p>Panel size when collapsed; defaults to 0.</p>
150+
</td>
151+
</tr>
152+
<tr>
153+
<td>collapsible</td>
154+
<td><p>This panel can be collapsed.</p>
155+
<p>ℹ️ A collapsible panel will collapse when it&#39;s size is less than of the specified <code>minSize</code></p>
156+
</td>
157+
</tr>
158+
<tr>
159+
<td>defaultSize</td>
160+
<td><p>Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.</p>
161+
</td>
162+
</tr>
163+
<tr>
164+
<td>id</td>
165+
<td><p>Uniquely identifies this panel within the parent group.
166+
Falls back to <code>useId</code> when not provided.</p>
167+
<p>ℹ️ This prop is used to associate persisted group layouts with the original panel.</p>
168+
<p>ℹ️ This value will also be assigned to the <code>data-panel-id</code> attribute.</p>
169+
</td>
170+
</tr>
171+
<tr>
172+
<td>maxSize</td>
173+
<td><p>Maximum size of Panel within its parent group; defaults to 100%.</p>
174+
</td>
175+
</tr>
176+
<tr>
177+
<td>minSize</td>
178+
<td><p>Minimum size of Panel within its parent group; defaults to 0%.</p>
179+
</td>
180+
</tr>
181+
<tr>
182+
<td>onResize</td>
183+
<td><p>Called when panel sizes change; receives a map of Panel id to size.</p>
184+
</td>
185+
</tr>
186+
<tr>
187+
<td>style</td>
188+
<td><p>CSS properties.</p>
189+
<p>⚠️ Class is applied to nested HTMLDivElement to avoid styles that interfere with Flex layout.</p>
190+
</td>
191+
</tr>
192+
</tbody>
193+
</table>
194+
54195
<!-- Panel:optional:end -->
55196

56197
### ResizeHandle
@@ -59,10 +200,49 @@ Documentation for this project is available at [react-resizable-panels.vercel.ap
59200

60201
<!-- ResizeHandle:required:begin -->
61202

203+
<table>
204+
<thead>
205+
<tr>
206+
<th>Name</th>
207+
<th>Description</th>
208+
</tr>
209+
</thead>
210+
<tbody>
211+
</tbody>
212+
</table>
213+
62214
<!-- ResizeHandle:required:end -->
63215

64216
#### Optional props
65217

66218
<!-- ResizeHandle:optional:begin -->
67219

220+
<table>
221+
<thead>
222+
<tr>
223+
<th>Name</th>
224+
<th>Description</th>
225+
</tr>
226+
</thead>
227+
<tbody>
228+
<tr>
229+
<td>className</td>
230+
<td><p>CSS class name.</p>
231+
</td>
232+
</tr>
233+
<tr>
234+
<td>id</td>
235+
<td><p>Uniquely identifies the resize handle within the parent group.
236+
Falls back to <code>useId</code> when not provided.</p>
237+
<p>ℹ️ This value will also be assigned to the <code>data-resize-handle-id</code> attribute.</p>
238+
</td>
239+
</tr>
240+
<tr>
241+
<td>style</td>
242+
<td><p>CSS properties.</p>
243+
</td>
244+
</tr>
245+
</tbody>
246+
</table>
247+
68248
<!-- ResizeHandle:optional:end -->

0 commit comments

Comments
 (0)