Skip to content

Commit 8b98cf1

Browse files
Hugos68Hugos68
authored
docs: svelte $props.id (#2327)
* feat(svelte): $props.id * fix(docs): svelte link
1 parent 04d5a20 commit 8b98cf1

File tree

50 files changed

+178
-130
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+178
-130
lines changed

‎website/data/overview/composition.mdx

+75-13
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,79 @@ element part needs to have a unique id.
5151
Each time you initiate the machine with the `useMachine` hook, you'll need to
5252
ensure that you provide a unique id.
5353

54-
You can rely on framework-specific utilities to generate unique ids. React
55-
provides `useId()` hook and Solid.js provides a `createId()` function for this
56-
purpose.
57-
58-
```js
59-
/// ... 👇 must be unique
60-
const service = useMachine(toggle.machine, { id: useId() })
61-
/// ...
54+
In most cases, you can rely on the framework providing unique a unique id for each component.
55+
56+
### React
57+
58+
```jsx
59+
import * as accordion from "@zag-js/accordion"
60+
import { useMachine, normalizeProps } from "@zag-js/framework"
61+
import { useId } from "react"
62+
63+
function Component() {
64+
const service = useMachine(accordion.machine, { id: useId() })
65+
const api = machine.connect(service, normalizeProps)
66+
67+
// ...
68+
}
69+
```
70+
71+
See [useId](https://react.dev/reference/react/useId).
72+
73+
### Solid
74+
75+
```jsx
76+
import * as accordion from "@zag-js/accordion"
77+
import { useMachine, normalizeProps } from "@zag-js/solid"
78+
import { createUniqueId } from "solid-js"
79+
80+
function Component() {
81+
const service = useMachine(accordion.machine, { id: createUniqueId() })
82+
const api = machine.connect(service, normalizeProps)
83+
84+
// ...
85+
}
6286
```
6387

88+
See [createUniqueId](https://docs.solidjs.com/reference/component-apis/create-unique-id).
89+
90+
### Vue
91+
92+
```html
93+
<script setup>
94+
import * as accordion from "@zag-js/accordion"
95+
import { useMachine, normalizeProps } from "@zag-js/vue"
96+
import { useId } from "vue"
97+
98+
const service = useMachine(accordion.machine, { id: useId() })
99+
const api = machine.connect(service, normalizeProps)
100+
</script>
101+
102+
<template>
103+
<!-- ... -->
104+
</template>
105+
```
106+
107+
See [useId](https://vuejs.org/api/composition-api-helpers#useid).
108+
109+
### Svelte
110+
111+
```html
112+
<script>
113+
import * as accordion from "@zag-js/accordion"
114+
import { useMachine, normalizeProps } from "@zag-js/svelte"
115+
116+
const id = $props.id()
117+
const service = useMachine(accordion.machine, { id })
118+
const api = machine.connect(service, normalizeProps)
119+
</script>
120+
121+
122+
<!-- ... -->
123+
```
124+
125+
See [$props.id](https://svelte.dev/docs/svelte/$props#$props.id()).
126+
64127
Internally, Zag maps the unique id provided to each component parts needed for
65128
the widget to work.
66129

@@ -72,7 +135,7 @@ To achieve this, you will need to pass custom `ids` to the machine's context.
72135
This will ensure that calling `document.getElementById(...)` within the tooltip
73136
and/or popover will return the same element.
74137

75-
```tsx {7,12}
138+
```tsx {6,10}
76139
import * as tooltip from "@zag-js/tooltip"
77140
import * as popover from "@zag-js/popover"
78141

@@ -84,10 +147,9 @@ function Example() {
84147
const popoverService = useMachine(popover.machine, {
85148
ids: { trigger: "id-1" },
86149
})
150+
151+
// ...
87152
}
88-
89-
// render UI
90-
return null
91153
```
92154

93155
In the example above, you will notice that the popover and tooltip trigger share
@@ -107,7 +169,7 @@ To provide the correct reference to root node or document, you can pass
107169
> In shadow DOM, the root node can be derived from calling
108170
> `element.getRootNode()` method on any element.
109171
110-
```jsx {12,15,42}
172+
```jsx {12,16,42}
111173
import * as accordion from "@zag-js/accordion"
112174
import { useMachine, normalizeProps } from "@zag-js/react"
113175
import Frame, { useFrame } from "react-frame-component"

‎website/data/snippets/svelte/accordion/usage.mdx

+3-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
{ title: "Automobiles", content: "Sample accordion content" },
99
{ title: "Aircraft", content: "Sample accordion content" },
1010
]
11-
12-
const service = useMachine(accordion.machine, ({ id: "1" }))
11+
12+
const id = $props.id()
13+
const service = useMachine(accordion.machine, ({ id }))
1314
const api = $derived(accordion.connect(service, normalizeProps))
1415
</script>
1516

‎website/data/snippets/svelte/angle-slider/usage.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import * as angleSlider from "@zag-js/angle-slider"
44
import { normalizeProps, useMachine } from "@zag-js/svelte"
55
6-
const service = useMachine(angleSlider.machine, ({ id: "1" }))
7-
6+
const id = $props.id()
7+
const service = useMachine(angleSlider.machine, ({ id }))
88
const api = $derived(angleSlider.connect(service, normalizeProps))
99
</script>
1010

‎website/data/snippets/svelte/avatar/usage.mdx

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import * as avatar from "@zag-js/avatar"
44
import { useMachine, normalizeProps } from "@zag-js/svelte"
55
6-
const service = useMachine(avatar.machine, ({ id: "1" }))
6+
const id = $props.id()
7+
const service = useMachine(avatar.machine, ({ id }))
78
const api = $derived(avatar.connect(service, normalizeProps))
89
</script>
910

‎website/data/snippets/svelte/carousel/usage.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
"https://tinyurl.com/59jxz9uu",
1010
]
1111
12+
const id = $props.id()
1213
const service = useMachine(
13-
carousel.machine, ({ id: "1", slideCount: items.length }),
14+
carousel.machine, ({ id: id, slideCount: items.length }),
1415
)
15-
1616
const api = $derived(carousel.connect(service, normalizeProps))
1717
</script>
1818

‎website/data/snippets/svelte/checkbox/usage.mdx

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import * as checkbox from "@zag-js/checkbox"
44
import { normalizeProps, useMachine } from "@zag-js/svelte"
55
6-
const service = useMachine(checkbox.machine, ({ id: "1" }))
6+
const id = $props.id()
7+
const service = useMachine(checkbox.machine, ({ id }))
78
const api = $derived(checkbox.connect(service, normalizeProps))
89
</script>
910

‎website/data/snippets/svelte/clipboard/usage.mdx

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
import { ClipboardCheck, ClipboardCopyIcon } from "lucide-svelte"
66
import { useId } from "react"
77
8+
const id = $props.id()
89
const service = useMachine(
910
clipboard.machine, ({
10-
id: "1",
11+
id: id,
1112
value: "https://github/com/chakra-ui/zag",
1213
}),
1314
)

‎website/data/snippets/svelte/collapsible/usage.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import * as collapsible from "@zag-js/collapsible"
44
import { normalizeProps, useMachine } from "@zag-js/svelte"
55
6-
const service = useMachine(collapsible.machine, ({ id: "1" }))
7-
6+
const id = $props.id()
7+
const service = useMachine(collapsible.machine, ({ id }))
88
const api = $derived(collapsible.connect(service, normalizeProps))
99
</script>
1010

‎website/data/snippets/svelte/color-picker/usage.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import * as colorPicker from "@zag-js/color-picker"
44
import { normalizeProps, useMachine } from "@zag-js/svelte"
55
6-
const service = useMachine(colorPicker.machine, ({ id: "1" }))
7-
6+
const id = $props.id()
7+
const service = useMachine(colorPicker.machine, ({ id }))
88
const api = $derived(colorPicker.connect(service, normalizeProps))
99
</script>
1010

‎website/data/snippets/svelte/color-picker/with-channel-inputs.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
import * as colorPicker from "@zag-js/color-picker"
44
import { normalizeProps, useMachine } from "@zag-js/svelte"
55
6+
const id = $props.id()
67
const service = useMachine(colorPicker.machine, {
7-
id: "1",
8+
id,
89
defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
910
})
10-
1111
const api = $derived(colorPicker.connect(service, normalizeProps))
1212
</script>
1313

‎website/data/snippets/svelte/color-picker/with-eye-dropper.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
import * as colorPicker from "@zag-js/color-picker"
44
import { normalizeProps, useMachine } from "@zag-js/svelte"
55
6+
const id = $props.id()
67
const service = useMachine(colorPicker.machine, {
7-
id: "1",
8+
id,
89
defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
910
})
10-
1111
const api = $derived(colorPicker.connect(service, normalizeProps))
1212
</script>
1313

‎website/data/snippets/svelte/color-picker/with-preview.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
import * as colorPicker from "@zag-js/color-picker"
44
import { normalizeProps, useMachine } from "@zag-js/svelte"
55
6+
const id = $props.id()
67
const service = useMachine(colorPicker.machine, {
7-
id: "1",
8+
id,
89
defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
910
})
10-
1111
const api = $derived(colorPicker.connect(service, normalizeProps))
1212
</script>
1313

‎website/data/snippets/svelte/color-picker/with-swatches.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
import * as colorPicker from "@zag-js/color-picker"
44
import { normalizeProps, useMachine } from "@zag-js/svelte"
55
6+
const id = $props.id()
67
const service = useMachine(colorPicker.machine, {
7-
id: "1",
8+
id,
89
defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
910
})
10-
1111
const api = $derived(colorPicker.connect(service, normalizeProps))
12-
12+
1313
const presets = ["#ff0000", "#00ff00", "#0000ff"]
1414
</script>
1515

‎website/data/snippets/svelte/combobox/usage.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@
1717
itemToString: (item) => item.label,
1818
})
1919
20+
const id = $props.id()
2021
const service = useMachine(combobox.machine, {
21-
id: "1",
22+
id,
2223
collection,
2324
onOpenChange() {
2425
options = comboboxData
@@ -33,7 +34,6 @@
3334
options = newOptions
3435
},
3536
})
36-
3737
const api = $derived(combobox.connect(service, normalizeProps))
3838
</script>
3939

‎website/data/snippets/svelte/date-picker/usage.mdx

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import * as datepicker from "@zag-js/date-picker"
44
import { portal, useMachine, normalizeProps } from "@zag-js/svelte"
55
6-
const service = useMachine(datepicker.machine, ({ id: "1" }))
6+
const id = $props.id()
7+
const service = useMachine(datepicker.machine, ({ id }))
78
const api = $derived(datepicker.connect(service, normalizeProps))
89
</script>
910

‎website/data/snippets/svelte/dialog/usage.mdx

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import * as dialog from "@zag-js/dialog"
44
import { portal, normalizeProps, useMachine } from "@zag-js/svelte"
55
6-
const service = useMachine(dialog.machine, ({ id: "1" }))
6+
const id = $props.id()
7+
const service = useMachine(dialog.machine, ({ id }))
78
const api = $derived(dialog.connect(service, normalizeProps))
89
</script>
910

‎website/data/snippets/svelte/editable/custom-controls.mdx

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
<script lang="ts">
33
import * as editable from "@zag-js/editable"
44
import { useMachine, normalizeProps } from "@zag-js/svelte"
5-
const service = useMachine(editable.machine, ({ id: "1" }))
65
6+
const id = $props.id()
7+
const service = useMachine(editable.machine, ({ id }))
78
const api = $derived(editable.connect(service, normalizeProps))
89
</script>
910

‎website/data/snippets/svelte/editable/usage.mdx

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
<script lang="ts">
33
import * as editable from "@zag-js/editable"
44
import { useMachine, normalizeProps } from "@zag-js/svelte"
5-
const service = useMachine(editable.machine, ({ id: "1" }))
65
6+
const id = $props.id()
7+
const service = useMachine(editable.machine, ({ id }))
78
const api = $derived(editable.connect(service, normalizeProps))
89
</script>
910

‎website/data/snippets/svelte/file-upload/usage.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import * as fileUpload from "@zag-js/file-upload"
44
import { normalizeProps, useMachine } from "@zag-js/svelte"
55
6-
const service = useMachine(fileUpload.machine, ({ id: "1" }))
7-
6+
const id = $props.id()
7+
const service = useMachine(fileUpload.machine, ({ id }))
88
const api = $derived(fileUpload.connect(service, normalizeProps))
99
</script>
1010

‎website/data/snippets/svelte/hover-card/usage.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import * as hoverCard from "@zag-js/hover-card"
44
import { portal, useMachine, normalizeProps } from "@zag-js/svelte"
55
6-
const service = useMachine(hoverCard.machine, ({ id: "1" }))
7-
6+
const id = $props.id()
7+
const service = useMachine(hoverCard.machine, ({ id }))
88
const api = $derived(hoverCard.connect(service, normalizeProps))
99
</script>
1010

‎website/data/snippets/svelte/menu/context-menu.mdx

+2-5
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@
33
import * as menu from "@zag-js/menu"
44
import { normalizeProps, useMachine } from "@zag-js/svelte"
55
6-
const service = useMachine(menu.machine, {
7-
id: "1",
8-
}
9-
)
10-
6+
const id = $props.id()
7+
const service = useMachine(menu.machine, { id })
118
const api = $derived(menu.connect(service, normalizeProps))
129
</script>
1310

‎website/data/snippets/svelte/menu/nested-menu.mdx

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44
import { portal, normalizeProps, useMachine } from "@zag-js/svelte"
55
import { onMount } from "svelte"
66
7+
const id = $props.id()
8+
79
// Level 1 - File Menu
8-
const fileService = useMachine(menu.machine, ({ id: "1", "aria-label": "File" }))
10+
const fileService = useMachine(menu.machine, ({ id: `${id}-1`, "aria-label": "File" }))
911
1012
const fileMenu = $derived(menu.connect(fileService, normalizeProps))
1113
1214
// Level 2 - Share Menu
13-
const shareService = useMachine(menu.machine, ({ id: "2", "aria-label": "Share" }))
15+
const shareService = useMachine(menu.machine, ({ id: `${id}-2`, "aria-label": "Share" }))
1416
1517
const shareMenu = $derived(menu.connect(shareService, normalizeProps))
1618

‎website/data/snippets/svelte/menu/option-items.mdx

+2-4
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,8 @@
1919
let order = $state("")
2020
let type = $state<string[]>([])
2121
22-
const service = useMachine(menu.machine, {
23-
id: "1",
24-
})
25-
22+
const id = $props.id()
23+
const service = useMachine(menu.machine, { id })
2624
const api = $derived(menu.connect(service, normalizeProps))
2725
2826
const radios = $derived(

0 commit comments

Comments
 (0)