11# useDropdown  
22
3- [ Example] ( https://codesandbox. io/s/usedropdown-example1-88kql  ) 
3+ [ Example] ( https://redmadrobot.github. io/use-dropdown  ) 
44
55** useDropdown**  is a hook that helps you build a custom
66select element. It also takes away the pain
77of positioning of a dropdown element and repositioning it
88on scroll.
99
1010## Usage  
11+ 
1112``` typescript  jsx
1213const   {
1314  isOpen,
@@ -23,61 +24,62 @@ const {
2324  reducer ,
2425  autoScroll ,
2526  direction ,
26- })
27+ }); 
2728``` 
2829
2930### Arguments  
31+ 
3032` useDropdown `  accepts following arguments:
3133
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
3537
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
3941
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
4446
45- *  ** autoScroll**  - ` boolean ` 
46- Use it when dropdown is inside scrolling container.
47+ -  ** autoScroll**  - ` boolean ` 
48+    Use it when dropdown is inside scrolling container.
4749
48- *  ** direction**  - ` Direction ` 
49- Direction in which dropdown should be opened.
50+ -  ** direction**  - ` Direction ` 
51+    Direction in which dropdown should be opened.
5052
51-   ### State and methods 
53+ ### State and methods  
5254
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:
5557
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
5961
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.
6365
64- *  ** inputValue**  - ` string ` 
65- Current value of input.
66+ -  ** inputValue**  - ` string ` 
67+    Current value of input.
6668
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.
7173
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.
7678
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.
8082
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