Skip to content

Commit 665103c

Browse files
silviuaavramsilviuaavram
authored
chore: change codesandbox links
chore: change codesandbox links
2 parents efac6b3 + d63465f commit 665103c

File tree

5 files changed

+67
-54
lines changed

5 files changed

+67
-54
lines changed

‎src/docs/downshift/downshift.mdx

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ route: /downshift
77
import {useState} from 'react'
88
import {Playground} from 'docz'
99
import Downshift from 'downshift'
10-
import {items, menuStyles, comboboxStyles} from '../utils'
10+
import {itemFruits as items, menuStyles, comboboxStyles} from '../utils'
1111

1212
# Downshift
1313

@@ -49,7 +49,7 @@ are used as follows:
4949

5050
For a complete documentation on all the returned props, component props and more
5151
information check out the
52-
[Github Page](https://github.com/downshift-js/downshift).
52+
[Github Page][github-page].
5353

5454
## Important
5555

@@ -87,20 +87,17 @@ It is possible to achieve the correct HTML structure only if you use
8787
`getRootProps` getter prop from `Downshift`. You apply `getRootProps` on the
8888
wrapper element that contains the `<input>` and optionally the trigger button.
8989

90-
[CodeSandbox](https://codesandbox.io/s/simple-downshift-with-getrootprops-example-24s13)
90+
[CodeSandbox for usage with getRootProps.][code-sandbox-no-get-root-props]
9191

9292
<Playground>
9393
{() => {
9494
const DropdownCombobox = () => {
9595
return (
9696
<Downshift
97-
onChange={selection =>
98-
alert(
99-
selection
100-
? `You selected ${selection.value}`
101-
: 'Selection Cleared',
102-
)
97+
onChange={(selection) =>
98+
alert(selection ? `You selected ${selection.value}` : 'Selection Cleared')
10399
}
100+
itemToString={(item) => (item ? item.value : '')}
104101
>
105102
{({
106103
getInputProps,
@@ -115,7 +112,7 @@ wrapper element that contains the `<input>` and optionally the trigger button.
115112
getRootProps,
116113
}) => (
117114
<div>
118-
<label {...getLabelProps()}>Choose an element:</label>
115+
<label {...getLabelProps()}>Enter a fruit:</label>
119116
<div
120117
style={comboboxStyles}
121118
{...getRootProps({}, {suppressRefError: true})}
@@ -128,24 +125,21 @@ wrapper element that contains the `<input>` and optionally the trigger button.
128125
<ul {...getMenuProps()} style={menuStyles}>
129126
{isOpen
130127
? items
131-
.filter(item => !inputValue || item.includes(inputValue))
128+
.filter((item) => !inputValue || item.value.includes(inputValue))
132129
.map((item, index) => (
133130
<li
134131
{...getItemProps({
135-
key: item,
132+
key: item.value,
136133
index,
137134
item,
138135
style: {
139136
backgroundColor:
140-
highlightedIndex === index
141-
? 'lightgray'
142-
: 'white',
143-
fontWeight:
144-
selectedItem === item ? 'bold' : 'normal',
137+
highlightedIndex === index ? 'lightgray' : 'white',
138+
fontWeight: selectedItem === item ? 'bold' : 'normal',
145139
},
146140
})}
147141
>
148-
{item}
142+
{item.value}
149143
</li>
150144
))
151145
: null}
@@ -170,20 +164,17 @@ was advertised in the past, we are still supporting it, but we strongly suggest
170164
to move either to the structure with the `getRootProps` or even better to
171165
`useCombobox`.
172166

173-
[CodeSandbox](https://codesandbox.io/s/usecombobox-usage-evufg)
167+
[CodeSandbox for usage without getRootProps.][code-sandbox-get-root-props]
174168

175169
<Playground>
176170
{() => {
177171
const DropdownCombobox = () => {
178172
return (
179173
<Downshift
180-
onChange={selection =>
181-
alert(
182-
selection
183-
? `You selected ${selection.value}`
184-
: 'Selection Cleared',
185-
)
174+
onChange={(selection) =>
175+
alert(selection ? `You selected ${selection.value}` : 'Selection Cleared')
186176
}
177+
itemToString={(item) => (item ? item.value : '')}
187178
>
188179
{({
189180
getInputProps,
@@ -196,27 +187,30 @@ to move either to the structure with the `getRootProps` or even better to
196187
selectedItem,
197188
isOpen,
198189
}) => (
199-
<div>
200-
<label {...getLabelProps()}>Choose an element:</label>
190+
<div style={comboboxStyles}>
191+
<label {...getLabelProps()}>Enter a fruit:</label>
201192
<input {...getInputProps()} />
202193
<button {...getToggleButtonProps()} aria-label={'toggle menu'}>
203194
&#8595;
204195
</button>
205196
<ul {...getMenuProps()} style={menuStyles}>
206197
{isOpen &&
207198
items
208-
.filter(item => !inputValue || item.includes(inputValue))
199+
.filter((item) => !inputValue || item.value.includes(inputValue))
209200
.map((item, index) => (
210201
<li
211-
style={
212-
highlightedIndex === index
213-
? {backgroundColor: '#bde4ff'}
214-
: {}
215-
}
216-
key={`${item}${index}`}
217-
{...getItemProps({item, index})}
202+
{...getItemProps({
203+
key: `${item.value}${index}`,
204+
item,
205+
index,
206+
style: {
207+
backgroundColor:
208+
highlightedIndex === index ? 'lightgray' : 'white',
209+
fontWeight: selectedItem === item ? 'bold' : 'normal',
210+
},
211+
})}
218212
>
219-
{item}
213+
{item.value}
220214
</li>
221215
))}
222216
</ul>
@@ -229,6 +223,13 @@ to move either to the structure with the `getRootProps` or even better to
229223
}}
230224
</Playground>
231225

226+
## Other usage examples
227+
228+
To see more cool stuff you can build with `Downshift`, explore the [examples repository][examples-code-sandbox].
229+
232230
[combobox-aria]: https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
233231
[use-a-render-prop]: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce
234232
[github-page]: https://github.com/downshift-js/downshift
233+
[code-sandbox-get-root-props]: https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/01-basic-autocomplete.js
234+
[code-sandbox-no-get-root-props]: https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/00-get-root-props-example.js
235+
[examples-code-sandbox]: https://codesandbox.io/s/github/kentcdodds/downshift-examples

‎src/docs/hooks/useCombobox.mdx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -863,26 +863,30 @@ the [react-virtual github link][react-virtual-github].
863863
}}
864864
</Playground>
865865

866+
## Other usage examples
867+
868+
To see more cool stuff you can build with `useCombobox`, explore the [examples repository][examples-code-sandbox].
869+
866870
[combobox-aria]:
867871
https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
868872
[use-combobox-github]:
869873
https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox
870874
[code-sandbox-basic-usage]:
871-
https://codesandbox.io/s/usecombobox-usage-evufg
875+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useCombobox/basic-usage.js
872876
[code-sandbox-material-ui-usage]:
873-
https://codesandbox.io/s/usecombobx-ui-libraries-materialui-8jfx1
877+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useCombobox/material-ui/index.js
874878
[code-sandbox-controlling-state]:
875-
https://codesandbox.io/s/usecombobox-variations-controlling-state-wfr1j
879+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useCombobox/controlling-state.js
876880
[code-sandbox-state-reducer]:
877-
https://codesandbox.io/s/usecombobox-variations-state-reducer-x7feb
881+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useCombobox/state-reducer.js
878882
[code-sandbox-custom-window]:
879-
https://codesandbox.io/s/usecombobox-iframe-n27ii
883+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useCombobox/iframe.js
880884
[code-sandbox-basic-multiple-selection]:
881-
https://codesandbox.io/s/usecombobox-usage-x2hsf
885+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useCombobox/basic-multiple-selection.js
882886
[code-sandbox-action-props]:
883-
https://codesandbox.io/s/usecombobox-action-props-kzwos
887+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useCombobox/action-props.js
884888
[code-sandbox-react-virtual]:
885-
https://codesandbox.io/s/usecombobox-virtualized-sge8v
889+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useCombobox/react-virtual.js
886890
[react-virtual-github]:
887891
https://github.com/tannerlinsley/react-virtual
888892
[react-virtualized-github]:

‎src/docs/hooks/useMultipleSelection.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,6 @@ is up to the developer.
317317
[use-multiple-selection-github]:
318318
https://github.com/downshift-js/downshift/tree/master/src/hooks/useMultipleSelection
319319
[code-sandbox-combobox-usage]:
320-
https://codesandbox.io/s/usemultipleselection-combobox-usage-ft8zd
320+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useMultipleSelection/combobox.js
321321
[code-sandbox-select-usage]:
322-
https://codesandbox.io/s/usemultipleselection-select-usage-x4p1j
322+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useMultipleSelection/select.js

‎src/docs/hooks/useSelect.mdx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -718,21 +718,21 @@ the [react-virtual github link][react-virtual-github].
718718
[use-select-github]:
719719
https://github.com/downshift-js/downshift/tree/master/src/hooks/useSelect
720720
[code-sandbox-basic-usage]:
721-
https://codesandbox.io/s/useselect-usage-53qfj
721+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useSelect/basic-usage.js
722722
[code-sandbox-material-ui-usage]:
723-
https://codesandbox.io/s/useselect-ui-libraries-materialui-fls5o
723+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useSelect/material-ui/index.js
724724
[code-sandbox-controlling-state]:
725-
https://codesandbox.io/s/useselect-variations-controlling-state-8tvwj
725+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useSelect/controlling-state.js
726726
[code-sandbox-state-reducer]:
727-
https://codesandbox.io/s/useselect-variations-state-reducer-ysc2r
727+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useSelect/state-reducer.js
728728
[code-sandbox-custom-window]:
729-
https://codesandbox.io/s/useselect-iframe-l40g6
729+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useSelect/iframe.js
730730
[code-sandbox-basic-multiple-selection]:
731-
https://codesandbox.io/s/useselect-basic-multiple-selection-4lj25
731+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useSelect/basic-multiple-selection.js
732732
[code-sandbox-action-props]:
733-
https://codesandbox.io/s/useselect-action-props-zljdg
733+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useSelect/action-props.js
734734
[code-sandbox-react-virtual]:
735-
https://codesandbox.io/s/useselect-virtualized-478eu
735+
https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useSelect/react-virtual.js
736736
[react-virtual-github]:
737737
https://github.com/tannerlinsley/react-virtual
738738
[react-virtualized-github]:

‎src/docs/utils.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,14 @@ export const items = [
8787
'Oganesson',
8888
]
8989

90+
export const itemFruits = [
91+
{value: 'apple'},
92+
{value: 'pear'},
93+
{value: 'orange'},
94+
{value: 'grape'},
95+
{value: 'banana'},
96+
]
97+
9098
export const itemsAsObjects = [
9199
{
92100
primary: 'Cecil Abshire',

0 commit comments

Comments
 (0)