input

Autocomplete input field for React

Dec 03, 2020
Autocomplete input field for React

react-autocomplete-input

Autocomplete input field for React.

View Demo View Github

Usage Example

import TextInput from 'react-autocomplete-input'; import 'react-autocomplete-input/dist/bundle.css'; <TextInput options={["apple", "apricot", "banana", "carrot"]} />

Features

  • Supports both keyboard and mouse for option selection
  • Supports responsiveness and works on every device
  • Supports lazy-loading and dynamic option list updates
  • Supports all major browsers including IE 8+

Configurable Props

Note: All props are optional.

Component : string or func

Default value: "textarea"

Widget for rendering input field

defaultValue : string

Default value: ""

Initial text for input

disabled : boolean

Default value: false

Disables widget, i.e. during form submission

maxOptions : number

Default value: 6

Defines how many options can be listed simultaneously. Show all matched options if maxOptions equals 0.

onSelect : func

Default value: () => {}

Callback invoked upon selecting an option. Receives selection value as a parameter.

onRequestOptions : func

Default value: () => {}

Callback for requesting new options to support lazy-loading. If requestOnlyIfNoOptions is true, then onRequestOptions called only if no options are currently available. Otherwise onRequestOptions is called every time text is changed and trigger is found.

import React from 'react'; import TextInput from 'react-autocomplete-input'; class MyComponent extends React.Component { constructor(props) { super(props); this.handleRequestOptions = this.handleRequestOptions.bind(this); this.state = { options: ["apple", "apricot", "banana", "carror"] }; } // text in input is "I want @ap" handleRequestOptions(part) { console.log(part); // -> "ap", which is part after trigger "@" this.setState({ options: SOME_NEW_OPTION_ARRAY }); } render() { return <TextInput onRequestOptions={this.handleRequestOptions} options={this.state.options} />; } }

matchAny: boolean

Default value: false

If true, will match options in the middle of the word as well

offsetX: number

Default value: 0

Popup horizontal offset

offsetY: number

Default value: 0

Popup vertical offset

options : array

Default value: []

List of available options for autocomplete

regex : string

Default value: ^[a-zA-Z0-9_\-]+$

This regular expression checks if text after trigger can be autocompleted or not. I.e. "@ap" matches the default regex as "ap" matches the regex, therefore library will try to find appropriate option. "@a$p" fails to match the regex as there is not "

quot; character in it, therefore library considering this string as irrelevant.

requestOnlyIfNoOptions : boolean

Default value: true

If requestOnlyIfNoOptions is true, then onRequestOptions called only if no options are currently available. Otherwise onRequestOptions is called every time text is changed and trigger is found.

spaceRemovers : array

Default value: [',', '.', '!', '?']

By default, after option is selected, it is inserted with following spacer. If user inputs one of the characters from spaceRemovers array, then spacer is automatically removed. I.e. @apple ,| is automatically changed to @apple, |, where | represents caret.

spacer : string

Default value: ' '

Character which is inserted along with the selected option.

trigger : string

Default value: '@'

Character or string, which triggers showing autocompletion option list. '' and '@@' are both valid triggers. Keep in mind that user have to input at least one extra character to make option list available if empty trigger is used.

minChars: number

Default value: 0

Only show autocompletion option list after this many characters have been typed after the trigger character.

value : string

Default value: ''

Widget supports both controlling options: by value and by state. If you explicitly pass value prop, you have to update it manually every time onChange event is emitted. If you don't pass value prop, then widget uses internal state for value manipulation.

passThroughEnter: boolean

Default value: false

If true, then an enter / return keypress is passed on (after being used to autocomplete).
Useful if you want to have the form submit as soon as a single value is chosen.

Styles Customization

By default styles are defined in "react-autocomplete-input/dist/bundle.css", however, you may define your custom styles instead for following entities:

  • ul.react-autocomplete-input
  • ul.react-autocomplete-input > li
  • ul.react-autocomplete-input > li.active

Design Considerations

  1. Native "Undo" action is not fully supported. It might be changed in the future but currently there is no out-of-the-box solution, which solves this issue for all browsers at once.
  2. It is considered that list of options will be always small, lets say up to 2000 items. Therefore, options are stored internally as array. If your use-case requires to work with huge lists, I would recommend to reimplement option internal representation as binary search tree instead.

GitHub

Recommended
input

Autocomplete input field for React

Dec 03, 2020
Autocomplete input field for React

react-autocomplete-input

Autocomplete input field for React.

View Demo View Github

Usage Example

import TextInput from 'react-autocomplete-input'; import 'react-autocomplete-input/dist/bundle.css'; <TextInput options={["apple", "apricot", "banana", "carrot"]} />

Features

  • Supports both keyboard and mouse for option selection
  • Supports responsiveness and works on every device
  • Supports lazy-loading and dynamic option list updates
  • Supports all major browsers including IE 8+

Configurable Props

Note: All props are optional.

Component : string or func

Default value: "textarea"

Widget for rendering input field

defaultValue : string

Default value: ""

Initial text for input

disabled : boolean

Default value: false

Disables widget, i.e. during form submission

maxOptions : number

Default value: 6

Defines how many options can be listed simultaneously. Show all matched options if maxOptions equals 0.

onSelect : func

Default value: () => {}

Callback invoked upon selecting an option. Receives selection value as a parameter.

onRequestOptions : func

Default value: () => {}

Callback for requesting new options to support lazy-loading. If requestOnlyIfNoOptions is true, then onRequestOptions called only if no options are currently available. Otherwise onRequestOptions is called every time text is changed and trigger is found.

import React from 'react'; import TextInput from 'react-autocomplete-input'; class MyComponent extends React.Component { constructor(props) { super(props); this.handleRequestOptions = this.handleRequestOptions.bind(this); this.state = { options: ["apple", "apricot", "banana", "carror"] }; } // text in input is "I want @ap" handleRequestOptions(part) { console.log(part); // -> "ap", which is part after trigger "@" this.setState({ options: SOME_NEW_OPTION_ARRAY }); } render() { return <TextInput onRequestOptions={this.handleRequestOptions} options={this.state.options} />; } }

matchAny: boolean

Default value: false

If true, will match options in the middle of the word as well

offsetX: number

Default value: 0

Popup horizontal offset

offsetY: number

Default value: 0

Popup vertical offset

options : array

Default value: []

List of available options for autocomplete

regex : string

Default value: ^[a-zA-Z0-9_\-]+$

This regular expression checks if text after trigger can be autocompleted or not. I.e. "@ap" matches the default regex as "ap" matches the regex, therefore library will try to find appropriate option. "@a$p" fails to match the regex as there is not "

quot; character in it, therefore library considering this string as irrelevant.

requestOnlyIfNoOptions : boolean

Default value: true

If requestOnlyIfNoOptions is true, then onRequestOptions called only if no options are currently available. Otherwise onRequestOptions is called every time text is changed and trigger is found.

spaceRemovers : array

Default value: [',', '.', '!', '?']

By default, after option is selected, it is inserted with following spacer. If user inputs one of the characters from spaceRemovers array, then spacer is automatically removed. I.e. @apple ,| is automatically changed to @apple, |, where | represents caret.

spacer : string

Default value: ' '

Character which is inserted along with the selected option.

trigger : string

Default value: '@'

Character or string, which triggers showing autocompletion option list. '' and '@@' are both valid triggers. Keep in mind that user have to input at least one extra character to make option list available if empty trigger is used.

minChars: number

Default value: 0

Only show autocompletion option list after this many characters have been typed after the trigger character.

value : string

Default value: ''

Widget supports both controlling options: by value and by state. If you explicitly pass value prop, you have to update it manually every time onChange event is emitted. If you don't pass value prop, then widget uses internal state for value manipulation.

passThroughEnter: boolean

Default value: false

If true, then an enter / return keypress is passed on (after being used to autocomplete).
Useful if you want to have the form submit as soon as a single value is chosen.

Styles Customization

By default styles are defined in "react-autocomplete-input/dist/bundle.css", however, you may define your custom styles instead for following entities:

  • ul.react-autocomplete-input
  • ul.react-autocomplete-input > li
  • ul.react-autocomplete-input > li.active

Design Considerations

  1. Native "Undo" action is not fully supported. It might be changed in the future but currently there is no out-of-the-box solution, which solves this issue for all browsers at once.
  2. It is considered that list of options will be always small, lets say up to 2000 items. Therefore, options are stored internally as array. If your use-case requires to work with huge lists, I would recommend to reimplement option internal representation as binary search tree instead.

GitHub

Recommended
\n\nThis regular expression checks if text after `trigger` can be autocompleted or not. I.e. \"@ap\" matches the default regex as \"ap\" matches the regex, therefore library will try to find appropriate option. \"@a$p\" fails to match the regex as there is not \"$\" character in it, therefore library considering this string as irrelevant.\n\nrequestOnlyIfNoOptions : boolean\n--------------------------------\n\n#### Default value: `true`\n\nIf `requestOnlyIfNoOptions` is true, then `onRequestOptions` called only if no options are currently available. Otherwise `onRequestOptions` is called every time text is changed and `trigger` is found.\n\nspaceRemovers : array\n---------------------\n\n#### Default value: `[',', '.', '!', '?']`\n\nBy default, after option is selected, it is inserted with following `spacer`. If user inputs one of the characters from `spaceRemovers` array, then `spacer` is automatically removed. I.e. `@apple ,|` is automatically changed to `@apple, |`, where `|` represents caret.\n\nspacer : string\n---------------\n\n#### Default value: `' '`\n\nCharacter which is inserted along with the selected option.\n\ntrigger : string\n----------------\n\n#### Default value: `'@'`\n\nCharacter or string, which triggers showing autocompletion option list. '' and '@@' are both valid triggers. Keep in mind that user have to input at least one extra character to make option list available if empty trigger is used.\n\nminChars: number\n----------------\n\n#### Default value: 0\n\nOnly show autocompletion option list after this many characters have been typed after the trigger character.\n\nvalue : string\n--------------\n\n#### Default value: `''`\n\nWidget supports both controlling options: by value and by state. If you explicitly pass `value` prop, you have to update it manually every time `onChange` event is emitted. If you don't pass `value` prop, then widget uses internal state for value manipulation.\n\npassThroughEnter: boolean\n-------------------------\n\n#### Default value: false\n\nIf true, then an enter / return keypress is passed on (after being used to autocomplete). \nUseful if you want to have the form submit as soon as a single value is chosen.\n\nStyles Customization\n====================\n\nBy default styles are defined in `\"react-autocomplete-input/dist/bundle.css\"`, however, you may define your custom styles instead for following entities:\n\n* `ul.react-autocomplete-input`\n* `ul.react-autocomplete-input > li`\n* `ul.react-autocomplete-input > li.active`\n\nDesign Considerations\n=====================\n\n1. Native \"Undo\" action is not fully supported. It might be changed in the future but currently there is no out-of-the-box solution, which solves this issue for all browsers at once.\n2. It is considered that list of options will be always small, lets say up to 2000 items. Therefore, options are stored internally as array. If your use-case requires to work with huge lists, I would recommend to reimplement option internal representation as binary search tree instead.\n\nGitHub\n------","PublishedAt":"2020-12-03T02:10:25.000Z","Keywords":[{"__typename":"Keywords","Slug":"javascript"},{"__typename":"Keywords","Slug":"react"},{"__typename":"Keywords","Slug":"web"},{"__typename":"Keywords","Slug":"development"},{"__typename":"Keywords","Slug":"reactjs"},{"__typename":"Keywords","Slug":"frontend"},{"__typename":"Keywords","Slug":"input"}],"Categories":[{"__typename":"Keywords","Slug":"input"}]},"ROOT_QUERY":{"__typename":"Query","contentsElastics:{\"limit\":1,\"where\":{\"_where\":{\"body\":\"{\\\"query\\\":{\\\"bool\\\":{\\\"must\\\":[{\\\"match\\\":{\\\"id\\\":\\\"265350\\\"}}]}},\\\"sort\\\":[{\\\"id\\\":\\\"desc\\\"},\\\"_score\\\"]}\"}}}":[{"__ref":"ContentsElastic:265350"}],"contentsElastics:{\"limit\":3,\"where\":{\"_where\":{\"body\":\"{\\\"query\\\":{\\\"bool\\\":{\\\"must\\\":[{\\\"match\\\":{\\\"Keywords.Slug\\\":\\\"input\\\"}},{\\\"match\\\":{\\\"Keywords.Slug\\\":\\\"reactjs\\\"}}],\\\"must_not\\\":[{\\\"match\\\":{\\\"id\\\":\\\"265350\\\"}}]}},\\\"sort\\\":[{\\\"id\\\":\\\"desc\\\"},\\\"_score\\\"]}\"}}}":[{"__ref":"ContentsElastic:533934"},{"__ref":"ContentsElastic:267102"},{"__ref":"ContentsElastic:266974"}]},"UploadFile:35090":{"id":"35090","__typename":"UploadFile","formats":{"200":"m7qjclA9W6-EvCs-Te5G0bddCcc=/200x0/Semantic_U_Ix_88a2a54965.jpg","400":"v91Vqinlkj1NUhvbXxXfJZxkoY4=/400x0/Semantic_U_Ix_88a2a54965.jpg","600":"e9T8ci3WaDEMygsubCMi7myPsss=/600x0/Semantic_U_Ix_88a2a54965.jpg","800":"BAG-BnxnaKJwbiwS0DdQU_ruMsU=/800x0/Semantic_U_Ix_88a2a54965.jpg","1200":"zuQ1vhqsydliSpFludY-2UDIxcw=/1200x0/Semantic_U_Ix_88a2a54965.jpg","1600":"FfAzPfpzwDMyKjUmy8HLQzGzoMY=/1600x0/Semantic_U_Ix_88a2a54965.jpg","2000":"kYa-hMr-4u6l1LsSo-i7VxWDgEs=/2000x0/Semantic_U_Ix_88a2a54965.jpg","default":"BAG-BnxnaKJwbiwS0DdQU_ruMsU=/800x0/Semantic_U_Ix_88a2a54965.jpg","general":"BAG-BnxnaKJwbiwS0DdQU_ruMsU=/800x0/Semantic_U_Ix_88a2a54965.jpg","blur_400":"IWPtoQcak2Wsn33ftkURnIK-BAc=/400x0/filters:blur(8)/Semantic_U_Ix_88a2a54965.jpg","blur_600":"m5QV8vgOsFEm7x3WXWviLtmXn_4=/600x0/filters:blur(8)/Semantic_U_Ix_88a2a54965.jpg","blur_800":"0U8R0LBk6z7AWubYl_BXcSuFlxs=/800x0/filters:blur(8)/Semantic_U_Ix_88a2a54965.jpg","blur_1200":"f3zQ-Ec5uTP11iBkGOo9GzI9HrM=/1200x0/filters:blur(8)/Semantic_U_Ix_88a2a54965.jpg","blur_1600":"XaDp37UnsGBhw10WOnMwjMe7qUg=/1600x0/filters:blur(8)/Semantic_U_Ix_88a2a54965.jpg","mediaViewer":"zuQ1vhqsydliSpFludY-2UDIxcw=/1200x0/Semantic_U_Ix_88a2a54965.jpg","thumbnail":"v91Vqinlkj1NUhvbXxXfJZxkoY4=/400x0/Semantic_U_Ix_88a2a54965.jpg"},"width":753,"height":484},"ContentsElastic:533934":{"id":"533934","__typename":"ContentsElastic","Title":"Numeric input control with step buttons for Semantic UI React","Slug":"numeric-input-control-with-step-buttons-for-semantic-ui-react","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:35090"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/numeric-input-control-with-step-buttons-for-semantic-ui-react/","Description":"Numeric input control with step buttons for Semantic UI React.","Body":"semantic-ui-react-numberinput\n-----------------------------\n\nNumeric input control with step buttons for Semantic UI React.\n\n[View Demo](https://pksilen.github.io/semantic-ui-react-numberinput/) [View Github](https://github.com/pksilen/semantic-ui-react-numberinput)\n\n![Example image of numberInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-numberinput/master/example/number_input_with_border_radius.png)\n\n![Example image of numberInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-numberinput/master/example/right_buttons_number_input_with_border_radius.png)\n\nPrerequisites\n-------------\n\n```\n\"react\": \"^16.0.0\",\n\"react-dom\": \"^16.0.0\",\n\"semantic-ui-react\": \"^0.87.0\"\n```\n\nInstallation\n------------\n\n```\nnpm install --save semantic-ui-react-numberinput\n```\n\nDemo\n----\n\nNumberInput [demo](https://pksilen.github.io/semantic-ui-react-numberinput/)\n\nExample usage\n-------------\n\n```jsx\nimport React from 'react';\nimport NumberInput from 'semantic-ui-react-numberinput';\n\nclass NumberInputExample extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: '0'\n };\n }\n\n changeValue = (newValue) => {\n this.setState({ value: newValue });\n }\n\n render() => {(\n \u003cNumberInput value={this.state.value} onChange={this.changeValue} />\n )};\n}\n```\n\nRender NumberInput with step buttons on left and right side of the input (this is default behavior, if buttonPlacement is not specified)\n\n```jsx\n\u003cNumberInput buttonPlacement=\"leftAndRight\" value={this.state.value} onChange={this.changeValue} />\n```\n\nRender NumberInput with step buttons on the right side of the input\n\n```jsx\n\u003cNumberInput buttonPlacement=\"right\" value={this.state.value} onChange={this.changeValue} />\n```\n\nSpecify allowed number range to be between 0 and 100\n\n```jsx\n\u003cNumberInput minValue={0} maxValue={100} value={this.state.value} onChange={this.changeValue} />\n```\n\nSpecify buttons to increment/decrement by 5\n\n```jsx\n\u003cNumberInput stepAmount={5} value={this.state.value} onChange={this.changeValue} />\n```\n\nSpecify decimal NumberInput with increment/decrement step of 0.25 and default precision of 2\n\n```jsx\n\u003cNumberInput valueType=\"decimal\" stepAmount={0.25} value={this.state.value} onChange={this.changeValue} />\n```\n\nSpecify decimal NumberInput with increment/decrement step of 0.1 and precision of 1\n\n```jsx\n\u003cNumberInput valueType=\"decimal\" stepAmount={0.1} precision={1} value={this.state.value} onChange={this.changeValue} />\n```\n\nMore examples in `demo/demo.js` file\n\nMandatory NumberInput properties\n--------------------------------\n\n```\nvalue: string, // must be parseable to integer or decimal number depending on valueType\nonChange: (newValue: string) => void,\n```\n\nOptional NumberInput properties\n-------------------------------\n\n| property | description |\n| --- | --- |\n| allowEmptyValue | Specifies if value can be empty |\n| allowMouseWheel | Specifies if mouse wheel can used to change input value |\n| buttonPlacement | Specifies how step buttons are placed |\n| id | id for HTML outer div element |\n| className | class name(s) for HTML outer div element |\n| defaultValue | Specifies default value to be used when value is empty (must be integer or decimal number depending on valueType) |\n| disabled | Specifies if NumberInput is disabled |\n| doubleClickStepAmount | Specifies how much double click of a button increments/decrements the value, zero value disables double click feature |\n| minValue | Minimum value accepted for NumberInput (must be integer or decimal number depending on valueType) |\n| maxValue | Maximum value accepted for NumberInput (must be integer or decimal number depending on valueType) |\n| maxLength | Maximum length of HTML input value (must be a positive integer) |\n| placeholder | Placeholder text for input element when value is empty, applicable only when allowEmptyValue is true |\n| precision | Decimal number precision when valueType is 'decimal' |\n| showError | Specifies if HTML input element should show error style |\n| showTooltips | Specifies if tooltips are shown |\n| size | Specifies the size of the control |\n| stepAmount | Specifies how much buttons increment/decrement the value (must be a positive integer or decimal number depending on valueType) |\n| valueType | Specifies if value is integer or decimal number |\n\nOptional NumberInput property types\n-----------------------------------\n\n```ts\nallowEmptyValue: boolean,\nallowMouseWheel: boolean,\nbuttonPlacement: 'right' | 'leftAndRight' | 'none', \nid: string,\nclassName: string,\ndefaultValue: number,\ndisabled: boolean,\ndoubleClickStepAmount: number,\nminValue: number, \nmaxValue: number, \nmaxLength: number,\nplaceholder: string,\nprecision: number,\nshowError: boolean,\nshowTooltips: boolean,\nsize: 'mini' | 'small' | 'large' | 'big' | 'huge' | 'massive',\nstepAmount: number,\nvalueType: 'integer' | 'decimal'\n```\n\nDefault values for optional properties\n--------------------------------------\n\n```js\nallowEmptyValue: false,\nallowMouseWheel: false,\nbuttonPlacement: 'leftAndRight',\nid: undefined,\nclassName: undefined,\ndefaultValue: undefined,\ndisabled: false,\ndoubleClickStepAmount: 0,\nminValue: 0,\nmaxValue: 9999999999,\nmaxLength: 10,\nplaceholder: 'Enter a value',\nprecision: 2,\nshowError: false,\nshowTooltips: true,\nsize: 'small',\nstepAmount: 1,\nvalueType: 'integer'\n```\n\nKeyboard actions\n----------------\n\n| Key | Action |\n| --- | --- |\n| ArrowUp | Increments value by stepAmount |\n| ArrowDown | Decrements value by stepAmount |\n| + | Increments value by stepAmount |\n| \\- | Decrements value by stepAmount |\n| PageUp | Increments value by doubleClickStepAmount |\n| PageDown | Decrements value by doubleClickStepAmount |\n| Ctrl + ArrowUp | Increments value by doubleClickStepAmount |\n| Ctrl + ArrowDown | Decrements value by doubleClickStepAmount |\n| Ctrl + + | Increments value by doubleClickStepAmount |\n| Ctrl + - | Decrements value by doubleClickStepAmount |\n\nStyling example\n---------------\n\n![Example image of numberInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-numberinput/master/example/styled_number_input.png)\n\nstyles.css\n\n```css\n.numberInput .ui.button {\n background-color: red;\n border-radius: 0 !important;\n color: white;\n}\n\n.numberInput .ui.input > input {\n border-color: red;\n color: red;\n font-weight: bold;\n width: 50px;\n}\n```\n\nApplying CSS using className\n\n```jsx\n\u003cNumberInput className=\"numberInput\" value={this.state.value} onChange={this.changeValue} />\n```\n\nLicense\n-------\n\nMIT License\n\nMy other Semantic UI React components\n-------------------------------------\n\n* [Scrollbar](https://github.com/pksilen/semantic-ui-react-scrollbar)\n* [Date Time Input](https://github.com/pksilen/semantic-ui-react-datetimeinput)\n* [Slider](https://github.com/pksilen/semantic-ui-react-slider)\n* [Text Input with integrated label](https://github.com/pksilen/semantic-ui-react-labeledinput)\n* [Line style Text Input](https://github.com/pksilen/semantic-ui-react-lineinput)","PublishedAt":"2021-09-21T16:07:00.000Z","Keywords":[{"__typename":"Keywords","Slug":"javascript"},{"__typename":"Keywords","Slug":"react"},{"__typename":"Keywords","Slug":"web"},{"__typename":"Keywords","Slug":"development"},{"__typename":"Keywords","Slug":"reactjs"},{"__typename":"Keywords","Slug":"frontend"},{"__typename":"Keywords","Slug":"input"}],"Categories":[{"__typename":"Keywords","Slug":"input"}]},"UploadFile:9050":{"id":"9050","__typename":"UploadFile","formats":{"200":"mDxOR6b-flp3RRIvrobtox9hfxU=/200x0/react_intl_tel_input_db8b12cf8d.gif","400":"CKbFOmxt3EN0DoYqlBxpUfMhccs=/400x0/react_intl_tel_input_db8b12cf8d.gif","600":"AwRL0jmgKdKrxszEn_G5kk_RsTc=/600x0/react_intl_tel_input_db8b12cf8d.gif","800":"4K_dPkWVOEf3hn567aXuZ4IHIbE=/800x0/react_intl_tel_input_db8b12cf8d.gif","1200":"1nZN5isKkpJLc3TIuU9yW7tvaMo=/1200x0/react_intl_tel_input_db8b12cf8d.gif","1600":"SvlrvGY-51PZrNluL0di2KISJm0=/1600x0/react_intl_tel_input_db8b12cf8d.gif","2000":"-VB1f8GleG6TVMFiZC6l4b_jed0=/2000x0/react_intl_tel_input_db8b12cf8d.gif","default":"4K_dPkWVOEf3hn567aXuZ4IHIbE=/800x0/react_intl_tel_input_db8b12cf8d.gif","general":"4K_dPkWVOEf3hn567aXuZ4IHIbE=/800x0/react_intl_tel_input_db8b12cf8d.gif","blur_400":"4S8LGB4J8hS04QxLWy66EyxFEC8=/400x0/filters:blur(8)/react_intl_tel_input_db8b12cf8d.gif","blur_600":"jbwfBLs_77lSe7o-iwvaCPOjPvc=/600x0/filters:blur(8)/react_intl_tel_input_db8b12cf8d.gif","blur_800":"DWBaoyAZ6i5Chrbe7nqL1gQ07SA=/800x0/filters:blur(8)/react_intl_tel_input_db8b12cf8d.gif","blur_1200":"_NLq56Lta94WFSr3MG4wMSueh3o=/1200x0/filters:blur(8)/react_intl_tel_input_db8b12cf8d.gif","blur_1600":"abuSlXKe9-S6a7ARqhVYlvRM5y0=/1600x0/filters:blur(8)/react_intl_tel_input_db8b12cf8d.gif","mediaViewer":"1nZN5isKkpJLc3TIuU9yW7tvaMo=/1200x0/react_intl_tel_input_db8b12cf8d.gif","thumbnail":"CKbFOmxt3EN0DoYqlBxpUfMhccs=/400x0/react_intl_tel_input_db8b12cf8d.gif"},"width":363,"height":227},"ContentsElastic:267102":{"id":"267102","__typename":"ContentsElastic","Title":"Rewrite International Telephone Input in React.js","Slug":"rewrite-international-telephone-input-in-reactjs","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:9050"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/rewrite-international-telephone-input-in-react-js/","Description":"Rewrite International Telephone Input in React.js. (Looking for maintainers, and PRs & contributors are also welcomed!)","Body":"React-Intl-Tel-Input\n--------------------\n\nRewrite International Telephone Input in React.js. (Looking for maintainers, and PRs & contributors are also welcomed!)\n\n[View demo](http://patw0929.github.io/react-intl-tel-input/) [Download Source](https://github.com/patw0929/react-intl-tel-input/archive/master.zip)\n\nCollaborators Wanted!\n---------------------\n\nDue to the long commuting time, I have no much time to maintain this project often. ????\n\nSo If anybody else is willing to take on the work of bug fixes, integrating pull requests, etc. \nPlease let me know. ????\n\nI hope we can maintain the project together, and make this project better! ????\n\nExamples\n--------\n\nTo build the examples locally, run:\n\n```bash\nnpm install\nnpm start\n```\n\nor\n\n```bash\nyarn\nyarn start\n```\n\n```\nThen open [`localhost:3000`](http://localhost:3000) in a browser.\n```\n\nInstallation\n------------\n\nThe easiest way to use react-intl-tel-input is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).\n\nYou can also use the standalone build by including `dist/main.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.\n\n```bash\nnpm install react-intl-tel-input --save\n```\n\nor\n\n```bash\nyarn add react-intl-tel-input\n```\n\nUsage\n-----\n\n```javascript\nimport IntlTelInput from 'react-intl-tel-input';\nimport 'file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js';\nimport './node_modules/react-intl-tel-input/dist/main.css';\n\n\u003cIntlTelInput css={['intl-tel-input', 'form-control']}\n utilsScript={'libphonenumber.js'} />\n```\n\n### Heads up: CSS Sourcemaps\n\nAs noted [in the readme for style-loader](https://github.com/webpack/style-loader#recommended-configuration), if your webpack configuration for style-loader includes the option to enable sourcemaps, the flag images used by this component will not load.\n\n> **Note** about source maps support and assets referenced with `url`: when style loader is used with ?sourceMap option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated.\n\nBecause of this, we recommend you disable sourcemaps for the CSS include in this module.\n\n### Properties\n\nPlease see the [Demo Page](http://patw0929.github.io/react-intl-tel-input/)\n\nDevelopment (`src` and the build process)\n-----------------------------------------\n\n**NOTE:** The source code for the component is in `src`. A UMD bundle is also built to `dist`, which can be included without the need for any build system.\n\nTo build, watch and serve the examples (which will also watch the component source), run `npm start`.\n\nIf you want to build to the bundle file to `dist/` folder, please run:\n\n```bash\nnpm run build\n```\n\nor\n\n```bash\nyarn run build\n```\n\nGitHub\n------","PublishedAt":"2018-05-24T04:01:15.000Z","Keywords":[{"__typename":"Keywords","Slug":"javascript"},{"__typename":"Keywords","Slug":"react"},{"__typename":"Keywords","Slug":"web"},{"__typename":"Keywords","Slug":"development"},{"__typename":"Keywords","Slug":"reactjs"},{"__typename":"Keywords","Slug":"frontend"},{"__typename":"Keywords","Slug":"input"}],"Categories":[{"__typename":"Keywords","Slug":"input"}]},"UploadFile:8888":{"id":"8888","__typename":"UploadFile","formats":{"200":"FNcqJE6ksRIYDLmS-uXwiHxpCAA=/200x0/react_phone_input_2_ad39c9274d.gif","400":"SGhSkixqk-D0W2JAbKfGpquqv3A=/400x0/react_phone_input_2_ad39c9274d.gif","600":"CVQ9YJFfo0UFhRqbJJgn_XIX7zE=/600x0/react_phone_input_2_ad39c9274d.gif","800":"YCyknKxqshwo4SKwCG0wxrl1a8E=/800x0/react_phone_input_2_ad39c9274d.gif","1200":"KBIWZ5hCst-3VXPwQVhCW4TTqZE=/1200x0/react_phone_input_2_ad39c9274d.gif","1600":"JYd3Ko7adc-O7P6QnHKAXpFi_zs=/1600x0/react_phone_input_2_ad39c9274d.gif","2000":"aTGlmW3G3OTvUqoOmfh8LBp0omg=/2000x0/react_phone_input_2_ad39c9274d.gif","default":"YCyknKxqshwo4SKwCG0wxrl1a8E=/800x0/react_phone_input_2_ad39c9274d.gif","general":"YCyknKxqshwo4SKwCG0wxrl1a8E=/800x0/react_phone_input_2_ad39c9274d.gif","blur_400":"YytB6uqyHGGu22xCPfi-IO7O8ek=/400x0/filters:blur(8)/react_phone_input_2_ad39c9274d.gif","blur_600":"w4UW66-4QCem4mzFgVNQntKIM4w=/600x0/filters:blur(8)/react_phone_input_2_ad39c9274d.gif","blur_800":"B6kh64jfLr1rNwurCEKjP1pawxk=/800x0/filters:blur(8)/react_phone_input_2_ad39c9274d.gif","blur_1200":"9_ng_rmp3Onel3vjAhKbrimUKY0=/1200x0/filters:blur(8)/react_phone_input_2_ad39c9274d.gif","blur_1600":"3gD1FvtOILR9mplYFUs721u4ABg=/1600x0/filters:blur(8)/react_phone_input_2_ad39c9274d.gif","mediaViewer":"KBIWZ5hCst-3VXPwQVhCW4TTqZE=/1200x0/react_phone_input_2_ad39c9274d.gif","thumbnail":"SGhSkixqk-D0W2JAbKfGpquqv3A=/400x0/react_phone_input_2_ad39c9274d.gif"},"width":646,"height":300},"ContentsElastic:266974":{"id":"266974","__typename":"ContentsElastic","Title":"Highly customizable phone input component with auto formatting","Slug":"highly-customizable-phone-input-component-with-auto-formatting","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:8888"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/highly-customizable-phone-input-component-with-auto-formatting/","Description":"Highly customizable phone input component with auto formatting.","Body":"react-phone-input-2\n-------------------\n\nHighly customizable phone input component with auto formatting.\n\nInstallation\n------------\n\n```shell-script\nnpm install react-phone-input-2 --save\n```\n\nUsage\n-----\n\n```jsx\nReact.render(\n \u003cReactPhoneInput defaultCountry={'us'} onChange={handleOnChange}/>,\n document.getElementById('root')\n);\n```\n\nYour handler for the `onChange` event should expect a string as \nparameter, where the value is that of the entered phone number. For example:\n\n```jsx\nfunction handleOnChange(value) {\n this.setState({\n phone: value\n });\n}\n```\n\nOptions\n-------\n\n| Name | Type | Description | Example |\n| --- | --- | --- | --- |\n| excludeCountries | array | array of country codes to be excluded | \\['cu','cw','kz'\\] |\n| onlyCountries | array | country codes to be included | \\['cu','cw','kz'\\] |\n| preferredCountries | array | country codes to be at the top | \\['cu','cw','kz'\\] |\n| defaultCountry | string | initial country | 'us' |\n| value | string | input state value | |\n| placeholder | string | custom placeholder | |\n| name | string | input name | |\n| required | bool | false by default | |\n| disabled | bool | disable input and dropdown | |\n| containerStyle | object | styles for container | |\n| inputStyle | object | styles for input | |\n| buttonStyle | object | styles for dropdown button | |\n| dropdownStyle | object | styles for dropdown container | |\n| containerClass | string | class for container | |\n| inputClass | string | class for input | |\n| buttonClass | string | class for dropdown button | |\n| dropdownClass | string | class for dropdown container | |\n| autoFormat | bool | on/off auto formatting, true by default | |\n| disableAreaCodes | bool | disable local codes for all countries | |\n| disableCountryCode | bool | false by default | |\n| disableDropdown | bool | false by default | |\n| enableLongNumbers | bool | false by default | |\n| countryCodeEditable | bool | true by default | |\n\n### Regions\n\n| Name | Type | Description |\n| --- | --- | --- |\n| regions | array/string | to only show codes from selected regions |\n\n| Regions |\n| --- |\n| \\['america', 'europe', 'asia', 'oceania', 'africa'\\] |\n| Subregions |\n| \\['north-america', 'south-america', 'central-america', 'carribean', 'european-union', 'ex-ussr', 'middle-east', 'north-africa'\\] |\n\nRegions selected: {'europe'}\n\n```jsx\n\u003cReactPhoneInput\n defaultCountry='it'\n regions={'europe'}\n/>\n```\n\nRegions selected: {\\['north-america', 'carribean'\\]}\n\n```jsx\n\u003cReactPhoneInput\n defaultCountry='ca'\n regions={['north-america', 'carribean']}\n/>\n```\n\n### Localization\n\n| Name | Type |\n| --- | --- |\n| localization | object |\n\n```jsx\n\u003cReactPhoneInput\n onlyCountries=['de', 'es']\n localization={{'Germany': 'Deutschland', 'Spain': 'España'}}\n/>\n```\n\n### Supported events\n\n| | | | | |\n| --- | --- | --- | --- | --- |\n| onChange | onFocus | onBlur | onClick | onKeyDown |\n\nCountry data object not returns from onKeyDown event\n\n| Data | Type | Description |\n| --- | --- | --- |\n| value/event | string/object | the event or the phone number |\n| country data | object | the country object { name, dialCode, country code (iso2 format) } |\n\nGitHub\n------","PublishedAt":"2018-07-02T02:31:51.000Z","Keywords":[{"__typename":"Keywords","Slug":"javascript"},{"__typename":"Keywords","Slug":"react"},{"__typename":"Keywords","Slug":"web"},{"__typename":"Keywords","Slug":"development"},{"__typename":"Keywords","Slug":"reactjs"},{"__typename":"Keywords","Slug":"frontend"},{"__typename":"Keywords","Slug":"telephone-input"}],"Categories":[{"__typename":"Keywords","Slug":"telephone-input"}]}}