1
1
# useDropdown
2
2
3
- [ Example] ( https://codesandbox. io/s/usedropdown-example1-88kql )
3
+ [ Example] ( https://redmadrobot.github. io/use-dropdown )
4
4
5
5
** useDropdown** is a hook that helps you build a custom
6
6
select element. It also takes away the pain
7
7
of positioning of a dropdown element and repositioning it
8
8
on scroll.
9
9
10
10
## Usage
11
+
11
12
``` typescript jsx
12
13
const {
13
14
isOpen,
@@ -23,61 +24,62 @@ const {
23
24
reducer ,
24
25
autoScroll ,
25
26
direction ,
26
- })
27
+ });
27
28
```
28
29
29
30
### Arguments
31
+
30
32
` useDropdown ` accepts following arguments:
31
33
32
- * ** items** - ` Array<T> `
33
- Menu elements of your dropdown. It is expected that they will
34
- be the same type you passed to ` useDropdown ` generic
34
+ - ** items** - ` Array<T> `
35
+ Menu elements of your dropdown. It is expected that they will
36
+ be the same type you passed to ` useDropdown ` generic
35
37
36
- * ** onSelect** - ` (item: T) => void `
37
- Function which is called each time you click on element or
38
- select it with Enter key
38
+ - ** onSelect** - ` (item: T) => void `
39
+ Function which is called each time you click on element or
40
+ select it with Enter key
39
41
40
- * ** reducer**
41
- Using this function you can change how ` useDropdown ` reacts
42
- to certain events; For example, you can prevent dropdown
43
- from closing after user selects an option
42
+ - ** reducer**
43
+ Using this function you can change how ` useDropdown ` reacts
44
+ to certain events; For example, you can prevent dropdown
45
+ from closing after user selects an option
44
46
45
- * ** autoScroll** - ` boolean `
46
- Use it when dropdown is inside scrolling container.
47
+ - ** autoScroll** - ` boolean `
48
+ Use it when dropdown is inside scrolling container.
47
49
48
- * ** direction** - ` Direction `
49
- Direction in which dropdown should be opened.
50
+ - ** direction** - ` Direction `
51
+ Direction in which dropdown should be opened.
50
52
51
- ### State and methods
53
+ ### State and methods
52
54
53
- ` useDropdown ` returns it's state and provides methods that
54
- you should use to build your dropdown:
55
+ ` useDropdown ` returns it's state and provides methods that
56
+ you should use to build your dropdown:
55
57
56
- * ** isOpen** - ` boolean `
57
- Current state of dropdown. Use it to decide whether you should
58
- show menu or not
58
+ - ** isOpen** - ` boolean `
59
+ Current state of dropdown. Use it to decide whether you should
60
+ show menu or not
59
61
60
- * ** highlightedIndex** - ` number `
61
- Shows the index of an element that is currently highlighted by
62
- cursor or with arrow keys. Use it to apply styles.
62
+ - ** highlightedIndex** - ` number `
63
+ Shows the index of an element that is currently highlighted by
64
+ cursor or with arrow keys. Use it to apply styles.
63
65
64
- * ** inputValue** - ` string `
65
- Current value of input.
66
+ - ** inputValue** - ` string `
67
+ Current value of input.
66
68
67
- * ** getWrapperProps** - ` (): WrapperProps ` - _ required_
68
- Apply these props to block that represents your dropdown element.
69
- This block will be used to calculate the width of dropdown along
70
- with it's position on the screen.
69
+ - ** getWrapperProps** - ` (): WrapperProps ` - _ required_
70
+ Apply these props to block that represents your dropdown element.
71
+ This block will be used to calculate the width of dropdown along
72
+ with it's position on the screen.
71
73
72
- * ** getInputProps** - ` (): InputProps ` - _ optional_
73
- You can use it on your input. This method will help ` useDropdown `
74
- to track input's value and it also allows menu to be opened each time
75
- input recieves focus.
74
+ - ** getInputProps** - ` (): InputProps ` - _ optional_
75
+ You can use it on your input. This method will help ` useDropdown `
76
+ to track input's value and it also allows menu to be opened each time
77
+ input recieves focus.
76
78
77
- * ** getMenuProps** - ` (): MenuProps ` - _ required_
78
- Returns props for block element that wraps your menu items. It is
79
- necessary for correct positioning of you dropdown.
79
+ - ** getMenuProps** - ` (): MenuProps ` - _ required_
80
+ Returns props for block element that wraps your menu items. It is
81
+ necessary for correct positioning of you dropdown.
80
82
81
- * ** getItemProps** - ` (item: T, index: number) => ItemProps ` - _ required_
82
- Method for getting props for every item in your items list. Pass
83
- item and it's index to this method.
83
+ - ** getItemProps** - ` (item: T, index: number) => ItemProps ` - _ required_
84
+ Method for getting props for every item in your items list. Pass
85
+ item and it's index to this method.
0 commit comments