Skip to content

Commit 85db92a

Browse files
segunadebayosegunadebayo
committed
docs: update
1 parent 4d8eb26 commit 85db92a

File tree

4 files changed

+178
-1
lines changed

4 files changed

+178
-1
lines changed

‎website/src/content/pages/components/combobox.mdx‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,8 @@ functionality.
9393

9494
### Creatable Options
9595

96-
Allow users to create new options when their search doesn't match any existing items. This is useful for tags, categories, or other custom values.
96+
Allow users to create new options when their search doesn't match any existing items. This is useful for tags,
97+
categories, or other custom values.
9798

9899
<Example id="creatable" />
99100

@@ -123,6 +124,49 @@ const { collection } = useListCollection({
123124

124125
## Guides
125126

127+
### Type-Safety
128+
129+
The `Combobox.RootComponent` type enables you to create closed, strongly typed wrapper components that maintain full
130+
type safety for collection items.
131+
132+
This is particularly useful when building reusable combobox components with custom props and consistent styling.
133+
134+
```tsx
135+
import { Combobox as ArkCombobox, type CollectionItem } from '@ark-ui/react/combobox'
136+
import { useListCollection } from '@ark-ui/react/collection'
137+
138+
interface ComboboxProps<T extends CollectionItem> extends ArkCombobox.RootProps<T> {}
139+
140+
const Combobox: ArkCombobox.RootComponent = (props) => {
141+
return <ArkCombobox.Root {...props}>{/* ... */}</ArkCombobox.Root>
142+
}
143+
```
144+
145+
Then, you can use the `Combobox` component as follows:
146+
147+
```tsx
148+
const App = () => {
149+
const { collection } = useListCollection({
150+
initialItems: [
151+
{ label: 'React', value: 'react' },
152+
{ label: 'Vue', value: 'vue' },
153+
{ label: 'Svelte', value: 'svelte' },
154+
],
155+
})
156+
return (
157+
<Combobox
158+
collection={collection}
159+
onValueChange={(e) => {
160+
// this will be strongly typed Array<{ label: string, value: string }>
161+
console.log(e.items)
162+
}}
163+
>
164+
{/* ... */}
165+
</Combobox>
166+
)
167+
}
168+
```
169+
126170
### Limit Large Datasets
127171

128172
The recommended way of managing large lists is to use the `limit` property on the `useListCollection` hook. This will

‎website/src/content/pages/components/listbox.mdx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,51 @@ property.
5050

5151
<Example id="group" />
5252

53+
## Guides
54+
55+
### Type-Safety
56+
57+
The `Listbox.RootComponent` type enables you to create closed, strongly typed wrapper components that maintain full type
58+
safety for collection items.
59+
60+
This is particularly useful when building reusable listbox components with custom props and consistent styling.
61+
62+
```tsx
63+
import { Listbox as ArkListbox, type CollectionItem } from '@ark-ui/react/listbox'
64+
import { createListCollection } from '@ark-ui/react/collection'
65+
66+
interface ListboxProps<T extends CollectionItem> extends ArkListbox.RootProps<T> {}
67+
68+
const Listbox: ArkListbox.RootComponent = (props) => {
69+
return <ArkListbox.Root {...props}>{/* ... */}</ArkListbox.Root>
70+
}
71+
```
72+
73+
Then, you can use the `Listbox` component as follows:
74+
75+
```tsx
76+
const App = () => {
77+
const collection = createListCollection({
78+
initialItems: [
79+
{ label: 'React', value: 'react' },
80+
{ label: 'Vue', value: 'vue' },
81+
{ label: 'Svelte', value: 'svelte' },
82+
],
83+
})
84+
return (
85+
<Listbox
86+
collection={collection}
87+
onValueChange={(e) => {
88+
// this will be strongly typed Array<{ label: string, value: string }>
89+
console.log(e.items)
90+
}}
91+
>
92+
{/* ... */}
93+
</Listbox>
94+
)
95+
}
96+
```
97+
5398
## API Reference
5499

55100
<ComponentTypes id="listbox" />

‎website/src/content/pages/components/select.mdx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,49 @@ DOM. This can improve performance by only rendering the content when needed.
9191

9292
## Guides
9393

94+
### Type-Safety
95+
96+
The `Select.RootComponent` type enables you to create closed, strongly typed wrapper components that maintain full type
97+
safety for collection items.
98+
99+
This is particularly useful when building reusable select components with custom props and consistent styling.
100+
101+
```tsx
102+
import { Select as ArkSelect, type CollectionItem } from '@ark-ui/react/select'
103+
import { createListCollection } from '@ark-ui/react/collection'
104+
105+
interface SelectProps<T extends CollectionItem> extends ArkSelect.RootProps<T> {}
106+
107+
const Select: ArkSelect.RootComponent = (props) => {
108+
return <ArkSelect.Root {...props}>{/* ... */}</ArkSelect.Root>
109+
}
110+
```
111+
112+
Then, you can use the `Select` component as follows:
113+
114+
```tsx
115+
const App = () => {
116+
const collection = createListCollection({
117+
initialItems: [
118+
{ label: 'React', value: 'react' },
119+
{ label: 'Vue', value: 'vue' },
120+
{ label: 'Svelte', value: 'svelte' },
121+
],
122+
})
123+
return (
124+
<Select
125+
collection={collection}
126+
onValueChange={(e) => {
127+
// this will be strongly typed Array<{ label: string, value: string }>
128+
console.log(e.items)
129+
}}
130+
>
131+
{/* ... */}
132+
</Select>
133+
)
134+
}
135+
```
136+
94137
### Usage in Popover or Dialog
95138

96139
When using the Select component within a `Popover` or `Dialog`, avoid rendering its content within a `Portal` or

‎website/src/content/pages/components/tree-view.mdx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,51 @@ prop to render the tree items as links, passing the `href` prop to a `<a>` eleme
8686

8787
<Example id="links" />
8888

89+
## Guides
90+
91+
### Type-Safety
92+
93+
The `TreeView.RootComponent` type enables you to create closed, strongly typed wrapper components that maintain full type
94+
safety for tree nodes.
95+
96+
This is particularly useful when building reusable tree view components with custom props and consistent styling.
97+
98+
```tsx
99+
import { TreeView as ArkTreeView, type TreeNode } from '@ark-ui/react/tree-view'
100+
import { createTreeCollection } from '@ark-ui/react/collection'
101+
102+
interface TreeViewProps<T extends TreeNode> extends ArkTreeView.RootProps<T> {}
103+
104+
const TreeView: ArkTreeView.RootComponent = (props) => {
105+
return <ArkTreeView.Root {...props}>{/* ... */}</ArkTreeView.Root>
106+
}
107+
```
108+
109+
Then, you can use the `TreeView` component as follows:
110+
111+
```tsx
112+
const App = () => {
113+
const collection = createTreeCollection({
114+
initialItems: [
115+
{ id: '1', label: 'React', children: [] },
116+
{ id: '2', label: 'Vue', children: [] },
117+
{ id: '3', label: 'Svelte', children: [] },
118+
],
119+
})
120+
return (
121+
<TreeView
122+
collection={collection}
123+
onSelectionChange={(e) => {
124+
// this will be strongly typed Array<{ id: string, label: string, children: [] }>
125+
console.log(e.value)
126+
}}
127+
>
128+
{/* ... */}
129+
</TreeView>
130+
)
131+
}
132+
```
133+
89134
## API Reference
90135

91136
<ComponentTypes id="tree-view" />

0 commit comments

Comments
 (0)