struxadotcloud/struxa

public

feat: global unslop6531421a month ago308 lines · 6.8 KB

1	# Base vs Radix
2
3	API differences between `base` and `radix`. Check the `
4
5	## Contents
6
7	- Composition: asChild vs render
8	- Button / trigger as non-button element
9	- Select (items prop, placeholder, positioning, multiple, object values)
10	- ToggleGroup (type vs multiple)
11	- Slider (scalar vs array)
12	- Accordion (type and defaultValue)
13
14	---
15
16	## Composition: asChild (radix) vs render (base)
17
18	Radix uses `asChild` to replace the default element. Base uses `render`. Don't wrap triggers in extra elements.
19
20	Incorrect:
21
22	```tsx
23	<DialogTrigger>
24	<div>
25	<Button>Open</Button
26	</div>
27	</DialogTrigger>
28	```
29
30	Correct (radix):
31
32	```tsx
33	<DialogTrigger asChild>
34	<Button>Open</Button
35	</DialogTrigger>
36	```
37
38	Correct (base):
39
40	```tsx
41	<DialogTrigger render={
42	```
43
44	This applies to all trigger and close components: `DialogTrigger`, `SheetTrigger`, `
45
46	---
47
48	## Button / trigger as non-button element (base only)
49
50	When `render` changes an element to a non-button (`<a>`, `
51
52	Incorrect (base): missing `nativeButton={false}
53
54	```tsx
55	<Button render={
56	```
57
58	Correct (base):
59
60	```tsx
61	<Button render={
62	Read the docs
63	</Button>
64	```
65
66	Correct (radix):
67
68	```tsx
69	<Button asChild>
70	<a href="
71	</Button>
72	```
73
74	Same for triggers whose `render` is not a `Button`:
75
76	```tsx
77	// base.
78	<PopoverTrigger render={
79	Pick date
80	</PopoverTrigger>
81	```
82
83	---
84
85	## Select
86
87	items prop (base only). Base requires an `items
88
89	Incorrect (base):
90
91	```tsx
92	<Select>
93	<SelectTrigger>
94	<SelectValue placeholder=
95	</SelectTrigger>
96	</Select>
97	```
98
99	Correct (base):
100
101	```tsx
102	const items = [
103	{ label: "Select a fruit",
104	{ label: "Apple",
105	{ label: "Banana",
106	]
107
108	<Select items={
109	<SelectTrigger>
110	<SelectValue />
111	</SelectTrigger>
112	<SelectContent>
113	<SelectGroup>
114	{items.map((
115	<SelectItem key=
116	))}
117	</SelectGroup>
118	</SelectContent>
119	</Select>
120	```
121
122	Correct (radix):
123
124	```tsx
125	<Select>
126	<SelectTrigger>
127	<SelectValue placeholder=
128	</SelectTrigger>
129	<SelectContent>
130	<SelectGroup>
131	<SelectItem value=
132	<SelectItem value=
133	</SelectGroup>
134	</SelectContent>
135	</Select>
136	```
137
138	Placeholder. Base uses a `{ value: null }
139
140	Content positioning. Base uses `alignItemWithTrigger
141
142	```tsx
143	// base.
144	<SelectContent alignItemWithTrigger=
145
146	// radix.
147	<SelectContent position="
148	```
149
150	---
151
152	## Select - multiple selection and object values (base only)
153
154	Base supports `multiple`, render-function children on `SelectValue`, and object values with
155
156	Correct (base - multiple selection):
157
158	```tsx
159	<Select items={
160	<SelectTrigger>
161	<SelectValue>
162	{(value: string
163	</SelectValue>
164	</SelectTrigger>
165	...
166	</Select>
167	```
168
169	Correct (base - object values):
170
171	```tsx
172	<Select defaultValue={
173	<SelectTrigger>
174	<SelectValue>{(value
175	</SelectTrigger>
176	...
177	</Select>
178	```
179
180	---
181
182	## ToggleGroup
183
184	Base uses a `multiple` boolean prop. Radix uses `type="single"` or `
185
186	Incorrect (base):
187
188	```tsx
189	<ToggleGroup type="
190	<ToggleGroupItem value=
191	</ToggleGroup>
192	```
193
194	Correct (base):
195
196	```tsx
197	// Single (no prop needed), defaultValue is always an array.
198	<ToggleGroup defaultValue=
199	<ToggleGroupItem value=
200	<ToggleGroupItem value=
201	</ToggleGroup>
202
203	// Multi-selection.
204	<ToggleGroup multiple>
205	<ToggleGroupItem value=
206	<ToggleGroupItem value=
207	</ToggleGroup>
208	```
209
210	Correct (radix):
211
212	```tsx
213	// Single, defaultValue is a string.
214	<ToggleGroup type="
215	<ToggleGroupItem value=
216	<ToggleGroupItem value=
217	</ToggleGroup>
218
219	// Multi-selection.
220	<ToggleGroup type="
221	<ToggleGroupItem value=
222	<ToggleGroupItem value=
223	</ToggleGroup>
224	```
225
226	Controlled single value:
227
228	```tsx
229	// base - wrap/unwrap arrays.
230	const [value, setValue
231	<ToggleGroup value={
232
233	// radix - plain string.
234	const [value, setValue] = React.useState("normal")
235	<ToggleGroup type="
236	```
237
238	---
239
240	## Slider
241
242	Base accepts a plain number for a single thumb. Radix always requires an array.
243
244	Incorrect (base):
245
246	```tsx
247	<Slider defaultValue={
248	```
249
250	Correct (base):
251
252	```tsx
253	<Slider defaultValue={
254	```
255
256	Correct (radix):
257
258	```tsx
259	<Slider defaultValue={
260	```
261
262	Both use arrays for range sliders. Controlled `onValueChange` in base may need a cast:
263
264	```tsx
265	// base.
266	const [value, setValue
267	<Slider value={
268
269	// radix.
270	const [value, setValue
271	<Slider value={
272	```
273
274	---
275
276	## Accordion
277
278	Radix requires `type="single"` or `type="multiple"` and supports `
279
280	Incorrect (base):
281
282	```tsx
283	<Accordion type="
284	<AccordionItem value=
285	</Accordion>
286	```
287
288	Correct (base):
289
290	```tsx
291	<Accordion defaultValue={
292	<AccordionItem value=
293	</Accordion>
294
295	// Multi-select.
296	<Accordion multiple defaultValue
297	<AccordionItem value=
298	<AccordionItem value=
299	</Accordion>
300	```
301
302	Correct (radix):
303
304	```tsx
305	<Accordion type="
306	<AccordionItem value=
307	</Accordion>
308	```