Updated readme and storybook stories

Author: eden-lane

.editorconfig

@@ -10,6 +10,9 @@ max_line_length = 120
 tab_width = 2
 trim_trailing_whitespace = true
 
+[*.md]
+trim_trailing_whitespace = false
+
 [{*.ats,*.ts}]
 indent_size = 2
 tab_width = 2

.storybook/main.js

@@ -5,6 +5,10 @@ module.exports = {
   ],
   "addons": [
     "@storybook/addon-links",
-    "@storybook/addon-essentials"
+    "@storybook/addon-essentials",
+    {
+      name: "@storybook/addon-docs",
+      options: { transcludeMarkdown: true }
+    }
   ]
 }

README.md

@@ -2,84 +2,115 @@
 
 [Example](https://redmadrobot.github.io/use-dropdown)
 
-**useDropdown** is a hook that helps you build a custom
+**useDropdown** is a hook that helps you to build a custom
 select element. It also takes away the pain
 of positioning of a dropdown element and repositioning it
 on scroll.
 
 ## Usage
 
 ```typescript jsx
-const {
-  isOpen,
-  highlightedIndex,
-  inputValue,
-  getWrapperProps,
-  getInputProps,
-  getMenuProps,
-  getItemProps,
-} = useDropdown<T>({
-  items,
-  onSelect,
-  reducer,
-  autoScroll,
-  direction,
-});
+import React, {useState} from 'react';
+import {useDropdown} from './useDropdown';
+
+const Select = ({value, onChange, items}) => {
+  const [input, setInput] = useState('');
+  const handleSelect = (value) => {
+    onChange(value);
+  }
+
+  const {
+    isOpen,
+    setOpen,
+    highlightedIndex,
+    getWrapperProps,
+    getInputProps,
+    getMenuProps,
+    getItemProps,
+  } = useDropdown({
+    items,
+    onSelect: handleSelect,
+  });
+
+  return (
+    <div className='wrapper' {...getWrapperProps()}>
+      <input
+        {...getInputProps()}
+        className='input'
+        value={input}
+        onChange={(ev) => setInput(ev.target.value)}
+      />
+      {
+        isOpen && createPortal(
+          <ul className='menu' {...getMenuProps()}>
+            {
+              items.map(item, index) => (
+                <li
+                  key={item.value}
+                  className={highlightedIndex === index ? 'item active' : 'item'}
+                  {...getItemProps(item, index)}
+                >
+                  {item.label}
+                </li>
+              )
+            }
+          </ul>, document.body
+        )
+      }
+    </div>
+  )
+}
+
+
 ```
 
 ### Arguments
 
 `useDropdown` accepts following arguments:
 
-- **items** - `Array<T>`
+- **items** - `Array<T>` _required_  
   Menu elements of your dropdown. It is expected that they will
   be the same type you passed to `useDropdown` generic
 
-- **onSelect** - `(item: T) => void`
+- **onSelect** - `(item: T) => void` _required_  
   Function which is called each time you click on element or
   select it with Enter key
 
-- **reducer**
+- **reducer** - `(state: DropdownState, action: ReducerAction) => DropdownState`  
   Using this function you can change how `useDropdown` reacts
   to certain events; For example, you can prevent dropdown
   from closing after user selects an option
 
-- **autoScroll** - `boolean`
-  Use it when dropdown is inside scrolling container.
-
-- **direction** - `Direction`
-  Direction in which dropdown should be opened.
-
 ### State and methods
 
 `useDropdown` returns it's state and provides methods that
 you should use to build your dropdown:
 
-- **isOpen** - `boolean`
+- **isOpen** - `boolean`  
   Current state of dropdown. Use it to decide whether you should
   show menu or not
 
-- **highlightedIndex** - `number`
+- **highlightedIndex** - `number`  
   Shows the index of an element that is currently highlighted by
   cursor or with arrow keys. Use it to apply styles.
 
-- **inputValue** - `string`
+- **inputValue** - `string`  
   Current value of input.
 
-- **getWrapperProps** - `(): WrapperProps` - _required_
+- **getWrapperProps** - `(): WrapperProps` - _required_  
   Apply these props to block that represents your dropdown element.
   This block will be used to calculate the width of dropdown along
   with it's position on the screen.
 
-- **getInputProps** - `(): InputProps` - _optional_
+- **getInputProps** - `(): InputProps` - _optional_  
   You can use it on your input. This method will help `useDropdown`
   to track input's value and it also allows menu to be opened each time
   input recieves focus.
 
-- **getMenuProps** - `(): MenuProps` - _required_
+- **getMenuProps** - `(): MenuProps` - _required_  
   Returns props for block element that wraps your menu items. It is
   necessary for correct positioning of you dropdown.
 
-- **getItemProps** - `(item: T, index: number) => ItemProps` - _required_
+- **getItemProps** - `(item: T, index: number) => ItemProps` - _required_  
   Method for getting props for every item in your items list. Pass
   item and it's index to this method.