From f0ba9aa015d23551943ce7d5af34d7a97f1c6316 Mon Sep 17 00:00:00 2001 From: smastrom <smastrom@proton.me> Date: Sun, 10 Dec 2023 02:25:49 +0100 Subject: [PATCH] edit README --- README.md | 46 +++++++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 6eb7aae..d7a7f93 100644 --- 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).