edit README

smastrom · Dec 10, 2023 · f0ba9aa · f0ba9aa
1 parent bc853bb
commit f0ba9aa
Showing 1 changed file with 25 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -29,27 +29,6 @@ pnpm add @smastrom/react-email-autocomplete
 
 <br />
 
-## :cyclone: Props
-
-| Prop           | Description                                           | Type                                   | Default   | Required           |
-| -------------- | ----------------------------------------------------- | -------------------------------------- | --------- | ------------------ |
-| `value`        | State or portion of state that holds the email value  | _string_                               | undefined | :white_check_mark: |
-| `onChange`     | State setter or custom dispatcher to update the email | _OnChange_                             | undefined | :white_check_mark: |
-| `baseList`     | Domains to suggest while typing the username          | _string[]_                             | undefined | :white_check_mark: |
-| `refineList`   | Domains to refine suggestions after typing `@`        | _string[]_                             | []        | :x:                |
-| `onSelect`     | Custom callback on suggestion select                  | _OnSelect_                             | () => {}  | :x:                |
-| `minChars`     | Minimum chars required to display suggestions         | _1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8_ | 2         | :x:                |
-| `maxResults`   | Maximum number of suggestions to display              | _2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8_      | 6         | :x:                |
-| `classNames`   | Class names for each element                          | _ClassNames_                           | undefined | :x:                |
-| `className`    | Class name of the wrapper element                     | _string_                               | undefined | :x:                |
-| `wrapperId`    | DOM ID of the wrapper element                         | _string_                               | undefined | :x:                |
-| `customPrefix` | Custom prefix for dropdown unique ID                  | _string_                               | `rbe_`    | :x:                |
-| `isInvalid`    | Value of `aria-invalid`                               | _boolean_                              | undefined | :x:                |
-
-:bulb: React's `ref` and any other `HTMLInputElement` attribute can be passed as prop to the component and it will be forwarded to the input element.
-
-<br />
-
 ## :art: Styling
 
 The component renders a single `div` with a very simple structure:
@@ -65,6 +44,8 @@ Wrapper — div
 Specify `classNames` for each element you'd like to style:
 
 ```jsx
+import { Email } from '@smastrom/react-email-autocomplete'
+
 const classNames = {
   wrapper: 'my-wrapper',
   input: 'my-input',
@@ -74,6 +55,8 @@ const classNames = {
   domain: 'my-domain',
 }
 
+const baseList = ['gmail.com', 'yahoo.com', 'hotmail.com', 'aol.com', 'msn.com']
+
 function App() {
   const [email, setEmail] = useState('')
 
@@ -265,6 +248,27 @@ Alternatively, you can use your own array of domains or [search]() for the one t
 
 <br />
 
+## :cyclone: Props
+
+| Prop           | Description                                           | Type                                   | Default   | Required           |
+| -------------- | ----------------------------------------------------- | -------------------------------------- | --------- | ------------------ |
+| `value`        | State or portion of state that holds the email value  | _string_                               | undefined | :white_check_mark: |
+| `onChange`     | State setter or custom dispatcher to update the email | _OnChange_                             | undefined | :white_check_mark: |
+| `baseList`     | Domains to suggest while typing the username          | _string[]_                             | undefined | :white_check_mark: |
+| `refineList`   | Domains to refine suggestions after typing `@`        | _string[]_                             | []        | :x:                |
+| `onSelect`     | Custom callback on suggestion select                  | _OnSelect_                             | () => {}  | :x:                |
+| `minChars`     | Minimum chars required to display suggestions         | _1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8_ | 2         | :x:                |
+| `maxResults`   | Maximum number of suggestions to display              | _2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8_      | 6         | :x:                |
+| `classNames`   | Class names for each element                          | _ClassNames_                           | undefined | :x:                |
+| `className`    | Class name of the wrapper element                     | _string_                               | undefined | :x:                |
+| `wrapperId`    | DOM ID of the wrapper element                         | _string_                               | undefined | :x:                |
+| `customPrefix` | Custom prefix for dropdown unique ID                  | _string_                               | `rbe_`    | :x:                |
+| `isInvalid`    | Value of `aria-invalid`                               | _boolean_                              | undefined | :x:                |
+
+:bulb: React's `ref` and any other `HTMLInputElement` attribute can be passed as prop to the component and it will be forwarded to the input element.
+
+<br />
+
 ## :globe_with_meridians: Localization
 
 This package ships with an optional hook that allows to localize suggestions according to the [browser's locale](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language).