,\n});\n\nconsole.log(formattedValue1);\n// $123,456\n\n// Format using intl locale config\nconst formattedValue2 = formatValue({\n value: 500000,\n intlConfig: { locale: 'en-IN', currency: 'INR' },\n});\n\nconsole.log(formattedValue2);\n// ₹5,00,000\n```\n\nv3.0.0 Release Notes\n--------------------\n\n### Breaking Changes\n\n* :warning: `onChange` renamed to `onValueChange` :warning:\n* `onBlurValue` has been removed.\n* `turnOffAbbreviations` renamed to `disableAbbreviations`.\n* `turnOffSeparators` renamed to `disableGroupSeparators`.\n* `precision` renamed to `decimalScale`\n\n### Improvements in v3\n\n* [Intl locale config](https://github.com/cchanxzy/react-currency-input-field#intl-locale-config) can be passed in. _Please note: formatting where the currency symbol is placed after the value like a suffix eg. (1 234,56 €) might cause problems, this is still in development._\n* Group separator will default to browser locale if not specified.\n* Can pass `ref` to the component.\n* `onChange` and `onBlur` functions can be passed in and will be called with original event.\n\n### Reasoning\n\nAs this component grew in usage, I started getting more bug reports and feature requests. That wasn't a problem though, because I was always happy to fix any bugs and implement any features if I could.\n\nHowever, this meant sometimes I was a bit trigger happy, and didn't always think about how the different options interacted with each other. I found that it was getting a bit convoluted for my liking, and choices I had made earlier in development, now seemed like it could be improved.\n\nTherefore, I took the opportunity of v3 to do a bit of tidying up for the component, in order to make it more future proof and intuitive to use.\n\nI apologize if any of the changes cause new bugs or issues. Please let me know and I will fix asap.\n\nGitHub\n------","PublishedAt":"2021-01-08T04:37:48.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:6923":{"id":"6923","__typename":"UploadFile","formats":{"200":"rxi8uDXBOjYjjcr_mzohfTzkY1o=/200x0/react_autocomplete_inputx_38478f30b1.gif","400":"HPlXCbEz7NXjOY2YdJU57Jql_lg=/400x0/react_autocomplete_inputx_38478f30b1.gif","600":"IiG0k3lI-GRHZ5NoACXhBFdelOs=/600x0/react_autocomplete_inputx_38478f30b1.gif","800":"a18iZeARLEJICkAHrfXJleH7vng=/800x0/react_autocomplete_inputx_38478f30b1.gif","1200":"4FmQRwxqTbH34HN5pEVS0mxPSFo=/1200x0/react_autocomplete_inputx_38478f30b1.gif","1600":"3Xi59VRIm_MBJqqo9JvLsaGAyHk=/1600x0/react_autocomplete_inputx_38478f30b1.gif","2000":"pBbxy9fCZyJkp0hT8iUVvKSUgvg=/2000x0/react_autocomplete_inputx_38478f30b1.gif","default":"a18iZeARLEJICkAHrfXJleH7vng=/800x0/react_autocomplete_inputx_38478f30b1.gif","general":"a18iZeARLEJICkAHrfXJleH7vng=/800x0/react_autocomplete_inputx_38478f30b1.gif","blur_400":"rwCgc1jSR_wkujijJKBDq_trI28=/400x0/filters:blur(8)/react_autocomplete_inputx_38478f30b1.gif","blur_600":"dzgysWKoBSxifndQ5spEf1K1vcE=/600x0/filters:blur(8)/react_autocomplete_inputx_38478f30b1.gif","blur_800":"il2KHyuGULuWqlr_IKaYthp-Lq8=/800x0/filters:blur(8)/react_autocomplete_inputx_38478f30b1.gif","blur_1200":"LtvOiFADZm--dxAxKpLZnx7Xsdg=/1200x0/filters:blur(8)/react_autocomplete_inputx_38478f30b1.gif","blur_1600":"rBc7dRTXB6d1z7bxYn7XUp9g9z8=/1600x0/filters:blur(8)/react_autocomplete_inputx_38478f30b1.gif","mediaViewer":"4FmQRwxqTbH34HN5pEVS0mxPSFo=/1200x0/react_autocomplete_inputx_38478f30b1.gif","thumbnail":"HPlXCbEz7NXjOY2YdJU57Jql_lg=/400x0/react_autocomplete_inputx_38478f30b1.gif"},"width":457,"height":283},"ContentsElastic:265350":{"id":"265350","__typename":"ContentsElastic","Title":"Autocomplete input field for React","Slug":"autocomplete-input-field-for-react","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:6923"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/autocomplete-input-field-for-react/","Description":"Autocomplete input field for React.","Body":"react-autocomplete-input\n------------------------\n\nAutocomplete input field for React.\n\n[View Demo](https://yury-dymov.github.io/react-autocomplete-input/) [View Github](https://github.com/yury-dymov/react-autocomplete-input)\n\nUsage Example\n=============\n\n```JavaScript\nimport TextInput from 'react-autocomplete-input';\nimport 'react-autocomplete-input/dist/bundle.css';\n\n\u003cTextInput options={[\"apple\", \"apricot\", \"banana\", \"carrot\"]} />\n```\n\nFeatures\n========\n\n* Supports both keyboard and mouse for option selection\n* Supports responsiveness and works on every device\n* Supports lazy-loading and dynamic option list updates\n* Supports all major browsers including IE 8+\n\nConfigurable Props\n==================\n\n_Note_: All props are optional.\n\nComponent : string or func\n--------------------------\n\n#### Default value: `\"textarea\"`\n\nWidget for rendering input field\n\ndefaultValue : string\n---------------------\n\n#### Default value: `\"\"`\n\nInitial text for input\n\ndisabled : boolean\n------------------\n\n#### Default value: `false`\n\nDisables widget, i.e. during form submission\n\nmaxOptions : number\n-------------------\n\n#### Default value: `6`\n\nDefines how many options can be listed simultaneously. Show all matched options if maxOptions equals 0.\n\nonSelect : func\n---------------\n\n#### Default value: `() => {}`\n\nCallback invoked upon selecting an option. Receives selection value as a parameter.\n\nonRequestOptions : func\n-----------------------\n\n#### Default value: `() => {}`\n\nCallback 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.\n\n```JavaScript\nimport React from 'react';\nimport TextInput from 'react-autocomplete-input';\n\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleRequestOptions = this.handleRequestOptions.bind(this);\n\n this.state = { options: [\"apple\", \"apricot\", \"banana\", \"carror\"] };\n }\n\n // text in input is \"I want @ap\"\n handleRequestOptions(part) {\n console.log(part); // -> \"ap\", which is part after trigger \"@\"\n this.setState({ options: SOME_NEW_OPTION_ARRAY });\n }\n\n render() {\n return \u003cTextInput onRequestOptions={this.handleRequestOptions} options={this.state.options} />;\n }\n}\n```\n\nmatchAny: boolean\n-----------------\n\n#### Default value: false\n\nIf true, will match options in the middle of the word as well\n\noffsetX: number\n---------------\n\n#### Default value: 0\n\nPopup horizontal offset\n\noffsetY: number\n---------------\n\n#### Default value: 0\n\nPopup vertical offset\n\noptions : array\n---------------\n\n#### Default value: `[]`\n\nList of available options for autocomplete\n\nregex : string\n--------------\n\n#### Default value: `^[a-zA-Z0-9_\\-]+ Home - ReactJS Stream - reactjs.stream
\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"}]},"UploadFile:7029":{"id":"7029","__typename":"UploadFile","formats":{"200":"s2Z-9F6XOPJSa2a_-L_Qcm_0OkI=/200x0/react_verification_input_0c83a13a55.gif","400":"KDtB7Erz0TPxHjsyKERn451K9sM=/400x0/react_verification_input_0c83a13a55.gif","600":"Qu1wAY2OBOeUTPE5TOQa5lbe1Vw=/600x0/react_verification_input_0c83a13a55.gif","800":"50syPRQimEqTd-lUAa_kycH5FpE=/800x0/react_verification_input_0c83a13a55.gif","1200":"-eUHSqwRUuXejTWe5NitiFlEFy4=/1200x0/react_verification_input_0c83a13a55.gif","1600":"uDnrFLlfbuqKRfJG-mfKgFaeEGA=/1600x0/react_verification_input_0c83a13a55.gif","2000":"SNaHiNo9os0MR3m8CBajEdlNNek=/2000x0/react_verification_input_0c83a13a55.gif","default":"50syPRQimEqTd-lUAa_kycH5FpE=/800x0/react_verification_input_0c83a13a55.gif","general":"50syPRQimEqTd-lUAa_kycH5FpE=/800x0/react_verification_input_0c83a13a55.gif","blur_400":"B2P8upTW4pwPLwys7-Nu3hK-i6M=/400x0/filters:blur(8)/react_verification_input_0c83a13a55.gif","blur_600":"K5BvJSk3GQLkBHHIbty2saCrMXY=/600x0/filters:blur(8)/react_verification_input_0c83a13a55.gif","blur_800":"xscJSMZMt8YzM0y2690A_LUEEVk=/800x0/filters:blur(8)/react_verification_input_0c83a13a55.gif","blur_1200":"LxlWx4lW3kU9FWBTUzJAkbTe5UE=/1200x0/filters:blur(8)/react_verification_input_0c83a13a55.gif","blur_1600":"vZWD4TnFgAI9YIUtEgNqEU80UJY=/1600x0/filters:blur(8)/react_verification_input_0c83a13a55.gif","mediaViewer":"-eUHSqwRUuXejTWe5NitiFlEFy4=/1200x0/react_verification_input_0c83a13a55.gif","thumbnail":"KDtB7Erz0TPxHjsyKERn451K9sM=/400x0/react_verification_input_0c83a13a55.gif"},"width":541,"height":344},"UploadFile:7030":{"id":"7030","__typename":"UploadFile","formats":{"200":"RJtJF5VNBRCbmBqH2jDT8zaGde0=/200x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","400":"KWjm7J-275E-Yws_SyWvmfA7pr0=/400x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","600":"BWSoKiLate4Jt_muwXhCx8I2eA4=/600x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","800":"Brwcy8mVWtepUMcgbIL4tzwt9pM=/800x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","1200":"3-sO71sZi5dliWzOKE1n3_2blGE=/1200x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","1600":"j2XaTdtymyL4IZI6luMEZImzdTk=/1600x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","2000":"7UOf_ipq0aZByAg8damZpWZQfF4=/2000x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","default":"Brwcy8mVWtepUMcgbIL4tzwt9pM=/800x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","general":"Brwcy8mVWtepUMcgbIL4tzwt9pM=/800x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","blur_400":"EQv5iov2nuNv2hkqA5BPa76XG0c=/400x0/filters:blur(8)/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","blur_600":"T8JyKG4C3pbHjU9tsUpEvq4xoFk=/600x0/filters:blur(8)/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","blur_800":"isXNW-tD_ZnwEIlVAa-zzRCRgbE=/800x0/filters:blur(8)/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","blur_1200":"INPHr7C3z7orLMgecxC_yK6jjdM=/1200x0/filters:blur(8)/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","blur_1600":"U27lkDVjBjCMlY5ZCphDT-y0VUI=/1600x0/filters:blur(8)/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","mediaViewer":"3-sO71sZi5dliWzOKE1n3_2blGE=/1200x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif","thumbnail":"KWjm7J-275E-Yws_SyWvmfA7pr0=/400x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif"},"width":550,"height":100},"UploadFile:7031":{"id":"7031","__typename":"UploadFile","formats":{"200":"XAe-119HBK55ML4gIuwEGpcNm_M=/200x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","400":"1tZOyLJXpz24gS-bNIJC9zDoaKk=/400x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","600":"B7uqxJ7h2nu_KAjI4hbCHxphZS0=/600x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","800":"XexpbGVFxvJn-X4o4gJ16o0USiY=/800x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","1200":"ikncYkDgZ1pOdDKuWKwkUgPS7U0=/1200x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","1600":"LkUBcqInCPiu7VSxv9minoFVHUI=/1600x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","2000":"SSj4BsoJGGU_avwrjp2ZeKvcxDc=/2000x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","default":"XexpbGVFxvJn-X4o4gJ16o0USiY=/800x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","general":"XexpbGVFxvJn-X4o4gJ16o0USiY=/800x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","blur_400":"GC328VoDwo6NYxmaVO0G4xrotQY=/400x0/filters:blur(8)/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","blur_600":"uSTsIl3pHpO_T2t38LHn2bbl0JE=/600x0/filters:blur(8)/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","blur_800":"Ym_A3zJd66d28mRD5JEDWHFyPjY=/800x0/filters:blur(8)/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","blur_1200":"Sz5pucrPlGZMxVR1U_Rl--WKIQs=/1200x0/filters:blur(8)/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","blur_1600":"nuLjGNH4HiTGdDjdxCuCUT011T8=/1600x0/filters:blur(8)/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","mediaViewer":"ikncYkDgZ1pOdDKuWKwkUgPS7U0=/1200x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif","thumbnail":"1tZOyLJXpz24gS-bNIJC9zDoaKk=/400x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif"},"width":800,"height":150},"UploadFile:7032":{"id":"7032","__typename":"UploadFile","formats":{"200":"-DswIcxSsp3UV4zr5yv2TWFYkmM=/200x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","400":"GbQzsVZN04SRqV11mhh-FWf3FCM=/400x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","600":"vt4Ge5ojR1pi8M5AI0jg7vMeW98=/600x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","800":"L23XTsOq4KC51Ke-GNvCN3w6BJs=/800x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","1200":"C2CE5sLVq3yX3tP2C49sKLw1ucM=/1200x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","1600":"d-37SNJIPdW-2zQp1eGAzxgWPc0=/1600x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","2000":"WxRaZZWFAgaWK7nXdY_gNjeUvwQ=/2000x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","default":"L23XTsOq4KC51Ke-GNvCN3w6BJs=/800x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","general":"L23XTsOq4KC51Ke-GNvCN3w6BJs=/800x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","blur_400":"0DdQLvFxN2jEJkYm68kJYhxZ5m4=/400x0/filters:blur(8)/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","blur_600":"ksgiuz4ZFkyTUwoOPaki8648QLw=/600x0/filters:blur(8)/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","blur_800":"uPMnMy3dLNmaOBTLGcvf9N93zmM=/800x0/filters:blur(8)/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","blur_1200":"ZtyOOmugo5OvTFaGrk5_FcJfpvU=/1200x0/filters:blur(8)/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","blur_1600":"A6CvzhxwQffmcy6NRNBOTcDySIk=/1600x0/filters:blur(8)/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","mediaViewer":"C2CE5sLVq3yX3tP2C49sKLw1ucM=/1200x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif","thumbnail":"GbQzsVZN04SRqV11mhh-FWf3FCM=/400x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif"},"width":800,"height":150},"ContentsElastic:265411":{"id":"265411","__typename":"ContentsElastic","Title":"A customizable and masked react input that can be used for all sorts of codes","Slug":"a-customizable-and-masked-react-input-that-can-be-used-for-all-sorts-of-codes","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7029"}},{"__typename":"ComponentMediaMediaItems","Purpose":"post-image","URL":null,"File":{"__ref":"UploadFile:7030"}},{"__typename":"ComponentMediaMediaItems","Purpose":"post-image","URL":null,"File":{"__ref":"UploadFile:7031"}},{"__typename":"ComponentMediaMediaItems","Purpose":"post-image","URL":null,"File":{"__ref":"UploadFile:7032"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/a-customizable-and-masked-react-input-that-can-be-used-for-all-sorts-of-codes/","Description":"react-verification-input is a customizable, masked input that can be used to enter all sorts of codes e.g. security codes when two-factor authenticating.","Body":"react-verification-input\n------------------------\n\n`react-verification-input` is a customizable, masked input that can be used to enter all sorts of codes e.g. security codes when two-factor authenticating. Also I'm sure you can think of many more creative use cases. This component is fully compatible with [Redux Form](https://github.com/erikras/redux-form) ????\n\n![34587443-ab845a2e-f1a8-11e7-8227-390bc278041c](Brwcy8mVWtepUMcgbIL4tzwt9pM=/800x0/34587443_ab845a2e_f1a8_11e7_8227_390bc278041c_5d73dce6f0.gif)\n\nInstallation\n------------\n\nInstall it by running\n\n```bash\nnpm install react-verification-input --save\n```\n\nor\n\n```bash\nyarn add react-verification-input\n```\n\nin your terminal.\n\nUsage\n-----\n\nImport the React component as follows:\n\n```js\nimport VerificationInput from \"react-verification-input\";\n```\n\nInside the `render` method write:\n\n```js\n\u003cVerificationInput />\n```\n\nThat´s it! You now have a basic verification input with default configuration rendered on your page. ????????\n\nOf course the input can be configured manually. For a complete API overview see [here](#api-documentation).\n\n> **Note:** In order for it to work properly, make sure you have the `\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no user-scalable=no\">` tag in the head of your page. Otherwise, it might zoom in to the left side of the screen on mobile devices. This is the case because mobile devices zoom in on inputs and there is an input field outside of the viewport.\n\nAPI documentation\n-----------------\n\nAll of these props are optional and thus come with a default value. However it's recommended to use at least the `length`, `validChars` and `placeholder` props.\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| length | Number | `6` | Define how many characters the input should allow. |\n| validChars | String | `'A-Za-z0-9'` | Define which characters should be allowed. The string is inserted into a regexp character set ( `/[]/` ) for input validating. |\n| placeholder | String | `'·'` (U+00B7) | Define which character should be displayed as placeholder in empty fields. In order to use the blank character as a placeholder, specify this option as `' '` or `''`. |\n| autoFocus | Boolean | `false` | This will make the input focus automatically as soon as the component is rendered. |\n| removeDefaultStyles | Boolean | `false` | Use this option to completely remove any styles that are not required for the component to work properly. This is useful if you want to override the default styles. |\n| debug | Boolean | `false` | This will reveal what is going on behind the scenes, which might come in handy when trying to better understand the component. Obviously you don't want to use this in production. ???? |\n| container | Object | `{}` | Define the props of the container `div`. All props except for `className` are passed directly to the `div` element. Use `{ className: 'your-class' }` to style the input. These options are available on every element. For more details on how to apply your custom styling see [here](#custom-styling). |\n| inputField | Object | `{}` | Define the props of the `input` element. See `container` for more details. |\n| characters | Object | `{}` | Define the props of the characters `div`. See `container` for more details. |\n| character | Object | `{}` | Define the props of the character `div`s. See `container` for more details. |\n| getInputRef | Function | `() => {}` | Define a function that will receive input element `ref`. |\n\nCustom styling\n--------------\n\n> **Note:** It's recommended to use the `removeDefaultStyles` option when applying custom styles, otherwise you may not be able to override the default styles.\n\nStyle the input by passing it your custom class names like so:\n\n```js\n\u003cVerificationInput\n removeDefaultStyles\n container={{\n className: \"container\",\n }}\n characters={{\n className: \"characters\",\n }}\n character={{\n className: \"character\",\n classNameInactive: \"character--inactive\",\n classNameSelected: \"character--selected\",\n }}\n/>\n```\n\nThere is also the `inputField` prop, which will attach styles to the actual input element, but you probably don't want to use this as it's outside the viewport and thus not visible.\n\nHave a look at these two examples:\n\n### Example 1\n\n```css\n.container {\n max-width: 350px;\n}\n\n.characters {\n height: 50px;\n}\n\n.character {\n line-height: 50px;\n font-size: 36px;\n background-color: rgba(255, 255, 255, 0.2);\n border: 1px solid transparent;\n border-radius: 8px;\n color: white;\n margin-left: 8px;\n}\n\n.character--inactive {\n background-color: rgba(255, 255, 255, 0.1);\n box-shadow: none;\n}\n\n.character--selected {\n border: 1px solid white;\n}\n```\n\n![34587466-c17fdf6a-f1a8-11e7-8b6d-51d28a8dcf4f](XexpbGVFxvJn-X4o4gJ16o0USiY=/800x0/34587466_c17fdf6a_f1a8_11e7_8b6d_51d28a8dcf4f_8995839ed5.gif)\n\n### Example 2\n\n```css\n.container {\n max-width: 350px;\n}\n\n.characters {\n height: 50px;\n}\n\n.character {\n line-height: 50px;\n font-size: 36px;\n background-color: rgba(255, 255, 255, 0.8);\n border: none;\n border-radius: 8px;\n color: black;\n margin-left: 8px;\n box-shadow: inset 0 0 2px black;\n\n &:nth-child(4) {\n margin-left: 24px;\n }\n}\n\n.character--inactive {\n background-color: rgba(0, 0, 0, 0.5);\n box-shadow: none;\n}\n\n.character--selected {\n color: black;\n outline: red 2px;\n background-color: white;\n}\n```\n\n![34587481-cab83e7e-f1a8-11e7-95fd-ab5ec10967fc](L23XTsOq4KC51Ke-GNvCN3w6BJs=/800x0/34587481_cab83e7e_f1a8_11e7_95fd_ab5ec10967fc_8e16f973a9.gif)\n\nGitHub\n------","PublishedAt":"2020-09-30T00:36:32.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:7052":{"id":"7052","__typename":"UploadFile","formats":{"200":"2SbbXtzVfurR7ZFSaY0RohRjkwk=/200x0/react_easy_edit_a78a839110.gif","400":"gf6kKAkNrZsj4Q5L6Uw0NYHzBi4=/400x0/react_easy_edit_a78a839110.gif","600":"piUprgNND-VmWlkk0nLkGR4IQeE=/600x0/react_easy_edit_a78a839110.gif","800":"T0aYbWA9z-V926g2SB2EVTUXsmE=/800x0/react_easy_edit_a78a839110.gif","1200":"TrGCKo8f-vM899ypGav0lx_Ye9M=/1200x0/react_easy_edit_a78a839110.gif","1600":"2AZkHcJgUjLQPOV0LvjQRfcUiC8=/1600x0/react_easy_edit_a78a839110.gif","2000":"GLgisip_nqcbdVR_pWyFk_J9Hs4=/2000x0/react_easy_edit_a78a839110.gif","default":"T0aYbWA9z-V926g2SB2EVTUXsmE=/800x0/react_easy_edit_a78a839110.gif","general":"T0aYbWA9z-V926g2SB2EVTUXsmE=/800x0/react_easy_edit_a78a839110.gif","blur_400":"tpK0H1aqER8_Bnz1G6wVfpuUtA8=/400x0/filters:blur(8)/react_easy_edit_a78a839110.gif","blur_600":"NlImso6GIztreZt2waj6oRrD_wM=/600x0/filters:blur(8)/react_easy_edit_a78a839110.gif","blur_800":"0PZUq5bd_05BGDIMmxrkOPh7VBQ=/800x0/filters:blur(8)/react_easy_edit_a78a839110.gif","blur_1200":"fv3GmaNEWQbDxzssBG9P4ct7ViQ=/1200x0/filters:blur(8)/react_easy_edit_a78a839110.gif","blur_1600":"x2nrssyH7To-LjYOLUoUdLODtu8=/1600x0/filters:blur(8)/react_easy_edit_a78a839110.gif","mediaViewer":"TrGCKo8f-vM899ypGav0lx_Ye9M=/1200x0/react_easy_edit_a78a839110.gif","thumbnail":"gf6kKAkNrZsj4Q5L6Uw0NYHzBi4=/400x0/react_easy_edit_a78a839110.gif"},"width":300,"height":192},"ContentsElastic:265424":{"id":"265424","__typename":"ContentsElastic","Title":"A React library that allows inline editing on HTML5 input components","Slug":"a-react-library-that-allows-inline-editing-on-html5-input-components","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7052"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/a-react-library-that-allows-inline-editing-on-html5-input-components/","Description":"Inline editing library for React.","Body":"react-easy-edit\n---------------\n\nA React library that allows inline editing on HTML5 input components.\n\nInline editing library for React.\n\n[View Demo](https://codesandbox.io/s/react-easy-edit-sandbox-2y97j) [View Documentation](https://giorgosart.gitbook.io/react-easy-edit/)\n\n### Features\n\n* Supports `input` (most types, even inputs with `datalist`), `textarea`,`radio`, `checkbox` and `select` HTML types\n* Validates user input\n* Allows customisation on all elements including the save and cancel buttons\n* Supports custom editComponent and custom displayComponent for each type\n\nInstallation\n------------\n\n`npm i react-easy-edit` or `yarn add react-easy-edit`\n\nExamples\n--------\n\nMore examples can be found **[here](https://giorgosart.gitbook.io/react-easy-edit/examples)**\n\n#### A simple example - Textbox\n\n```jsx\nimport React, { Component } from 'react';\nimport EasyEdit from 'react-easy-edit';\n\nfunction App() {\n\n const save = (value) => {alert(value)}\n const cancel = () => {alert(\"Cancelled\")}\n\n return (\n \u003cEasyEdit\n type=\"text\"\n onSave={save}\n onCancel={cancel}\n saveButtonLabel=\"Save Me\"\n cancelButtonLabel=\"Cancel Me\"\n attributes={{ name: \"awesome-input\", id: 1}}\n instructions=\"Star this repo!\"\n />\n );\n}\n```\n\n#### Radio buttons\n\n```jsx\n\u003cEasyEdit\n type=\"radio\"\n value=\"one\"\n onSave={save}\n options={[\n {label: 'First option', value: 'one'},\n {label: 'Second option', value: 'two'}]}\n instructions=\"Custom instructions\"\n/>\n```\n\n#### Date\n\n```jsx\n\u003cEasyEdit\n type=\"date\"\n onSave={save}\n instructions=\"Select your date of birth\"\n/>\n```\n\n#### Dropdown\n\n```jsx\n\u003cEasyEdit\n type=\"select\"\n options={[\n {label: 'First option', value: 'one'},\n {label: 'Second option', value: 'two'}]}\n onSave={save}\n placeholder=\"My Placeholder\"\n instructions=\"Custom instructions\"\n/>\n```\n\n#### Datalist\n\n```jsx\n\u003cEasyEdit\n type=\"datalist\"\n options={[\n {label: 'First option', value: 'one'},\n {label: 'Second option', value: 'two'}]}\n onSave={save}\n instructions=\"Custom instructions\"\n/>\n```\n\n#### Checkboxes\n\n```jsx\n\u003cEasyEdit\n type=\"checkbox\"\n options={[\n {label: 'First option', value: 'one'},\n {label: 'Second option', value: 'two'}]}\n onSave={save}\n value={['one', 'two']} // this will preselect both options\n/>\n```\n\n#### Custom components\n\nWhen using custom input components, they must be passed in as props, like so:\n\n```jsx\n\u003cEasyEdit\n type=\"text\"\n onSave={() => {}}\n editComponent={\u003cCustomInput />}\n displayComponent={\u003cCustomDisplay />}\n/>\n```\n\nWhen defining a custom input component, the function `setParentValue` is injected into your custom component, which must be called in order to pass the desired value up to the parent `EasyEdit` component.\n\nFor example, if your component was a text field that needed to set the `EasyEdit` value as a user id based on a username entered, you would need to pass the id to `this.props.setParentValue` in order to get that value to the `EasyEdit` component.\n\ne.g.\n\n```jsx\n// Inside your custom input\n\nonChange(searchTerm) {\n getUserIdByUsername(searchTerm).then((userId) => {\n this.props.setParentValue(userId);\n })\n}\n```\n\nGitHub\n------","PublishedAt":"2020-09-16T00:42:58.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:7157":{"id":"7157","__typename":"UploadFile","formats":{"200":"O2cfCp9_xaEzUStpp89zoFFMwIo=/200x0/digitinputs_react_bcf9b67c17.png","400":"Qeirhg6L0kcNyoVFDkcXMwuB5cQ=/400x0/digitinputs_react_bcf9b67c17.png","600":"AEO4x2pJqcUnzx9_MSAZbPYpBO8=/600x0/digitinputs_react_bcf9b67c17.png","800":"yin67VEl9cyo7X7lcPB8pv1ynDo=/800x0/digitinputs_react_bcf9b67c17.png","1200":"5MJhPbc-Kc1yLWrBTvsnv-Ly-JE=/1200x0/digitinputs_react_bcf9b67c17.png","1600":"AmEMnFxvCWwEWtqOBMkrwJjR4uA=/1600x0/digitinputs_react_bcf9b67c17.png","2000":"zEo2iHIX6jaY1ts_QxhF7X3qF-o=/2000x0/digitinputs_react_bcf9b67c17.png","default":"yin67VEl9cyo7X7lcPB8pv1ynDo=/800x0/digitinputs_react_bcf9b67c17.png","general":"yin67VEl9cyo7X7lcPB8pv1ynDo=/800x0/digitinputs_react_bcf9b67c17.png","blur_400":"VLTwA557CykePb2r18z4xH9FmjU=/400x0/filters:blur(8)/digitinputs_react_bcf9b67c17.png","blur_600":"f8W3E_JbmGsYXcMyFqc4lOtCIoQ=/600x0/filters:blur(8)/digitinputs_react_bcf9b67c17.png","blur_800":"NwWxZJ8y908Kae-lGaVDvIwE_Nc=/800x0/filters:blur(8)/digitinputs_react_bcf9b67c17.png","blur_1200":"2l7x-lkkxN8Eo2B1tJI9OVHpJeg=/1200x0/filters:blur(8)/digitinputs_react_bcf9b67c17.png","blur_1600":"RgMmVxKKEbvbl_-aN4tyVhgoHnI=/1600x0/filters:blur(8)/digitinputs_react_bcf9b67c17.png","mediaViewer":"5MJhPbc-Kc1yLWrBTvsnv-Ly-JE=/1200x0/digitinputs_react_bcf9b67c17.png","thumbnail":"Qeirhg6L0kcNyoVFDkcXMwuB5cQ=/400x0/digitinputs_react_bcf9b67c17.png"},"width":477,"height":313},"ContentsElastic:265464":{"id":"265464","__typename":"ContentsElastic","Title":"A react component for digit inputs","Slug":"a-react-component-for-digit-inputs","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7157"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/a-react-component-for-digit-inputs/","Description":"It might be very useful to get SMS codes from user on two factor authentications and in many other scenarios when you need get an numerical input from user digit by digit.","Body":"digitinputs-react\n-----------------\n\nA react component for digit inputs. It might be very useful to get SMS codes from user on two factor authentications and in many other scenarios when you need get an numerical input from user digit by digit.\n\n[View Demo](https://yyalim.github.io/digitinputs-react/) [View Github](https://github.com/yyalim/digitinputs-react)\n\nInstall\n-------\n\n```bash\nnpm install --save digitinputs-react\n```\n\nUsage\n-----\n\nPass a function with single paramater to `onDigitsChange` props to get values. Digits lenght depends on how many `Digit` component passed as child. You can switch between `text` & `password` inputs by using `hidden` switch prop.\n\n```jsx\nimport React, { Component } from 'react'\n\nimport { DigitInputs, Digit } from 'digitinputs-react'\nimport 'digitinputs-react/dist/index.css'\n\nclass Example extends Component {\n // ...\n\n handleDigitsChange(value) {\n value.asNumber // -> 123\n value.asString // -> '123'\n value.asObject //-> { '0': '1', '1': '2', '2': '3'}\n }\n\n // ...\n render() {\n return (\n \u003cform>\n \u003cDigitInputs hidden onDigitsChange={this.handleDigitsChange}>\n \u003cDigit />\n \u003cDigit />\n \u003cDigit />\n \u003c/DigitInputs>\n \u003c/form>\n )\n }\n}\n```\n\nAnd you can pass custom `className` to override default styles on `DigitInputs` & `Digit` components\n\n```jsx\nfunction Example() {\n return (\n \u003cDigitInputs className=\"custom-digitinputs\">\n \u003cDigit className=\"digit-one\" />\n ...\n \u003c/DigitInputs>\n )\n}\n```\n\nGitHub\n------","PublishedAt":"2020-08-07T05:59:20.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:7196":{"id":"7196","__typename":"UploadFile","formats":{"200":"pdbnD61xPpzzC1HNDIlFdPUpeco=/200x0/react_individual_character_input_boxes_8dead71af8.png","400":"KvI_HD3MOzscPU4mS55WFqkhDd8=/400x0/react_individual_character_input_boxes_8dead71af8.png","600":"evwVyjvhTOhykbWLL5E0p74N58g=/600x0/react_individual_character_input_boxes_8dead71af8.png","800":"CTfM8L3sQkBzFUsnHlNJWkFTy3A=/800x0/react_individual_character_input_boxes_8dead71af8.png","1200":"1q_F56L4mQ45326_9G0abkVRd90=/1200x0/react_individual_character_input_boxes_8dead71af8.png","1600":"WT2G-p4mMsXZsd9gWEMOcJUJOQY=/1600x0/react_individual_character_input_boxes_8dead71af8.png","2000":"oBuicAUGwhkJbgLDtijGcNEQB7g=/2000x0/react_individual_character_input_boxes_8dead71af8.png","default":"CTfM8L3sQkBzFUsnHlNJWkFTy3A=/800x0/react_individual_character_input_boxes_8dead71af8.png","general":"CTfM8L3sQkBzFUsnHlNJWkFTy3A=/800x0/react_individual_character_input_boxes_8dead71af8.png","blur_400":"lx6EBp1CY9UJzKcUxwluyDq00Qc=/400x0/filters:blur(8)/react_individual_character_input_boxes_8dead71af8.png","blur_600":"Dmld61Nulkl7qmY0wQ1qIxCKdLs=/600x0/filters:blur(8)/react_individual_character_input_boxes_8dead71af8.png","blur_800":"V-T0JPwJPMweqzIvUfSHZdonczo=/800x0/filters:blur(8)/react_individual_character_input_boxes_8dead71af8.png","blur_1200":"wr_ts6WjIPbl21aJELyyBI22QaU=/1200x0/filters:blur(8)/react_individual_character_input_boxes_8dead71af8.png","blur_1600":"1iv9Yagsa6X6-iCKPI_s4tg7Nz4=/1600x0/filters:blur(8)/react_individual_character_input_boxes_8dead71af8.png","mediaViewer":"1q_F56L4mQ45326_9G0abkVRd90=/1200x0/react_individual_character_input_boxes_8dead71af8.png","thumbnail":"KvI_HD3MOzscPU4mS55WFqkhDd8=/400x0/react_individual_character_input_boxes_8dead71af8.png"},"width":784,"height":387},"ContentsElastic:265488":{"id":"265488","__typename":"ContentsElastic","Title":"React Individual Character Input Boxes","Slug":"react-individual-character-input-boxes","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7196"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/react-individual-character-input-boxes/","Description":"React Individual Character Input Boxes (RICIBs) are individual inputs that are separate from each other but functionally act similar as a regular input box.","Body":"react-individual-character-input-boxes\n--------------------------------------\n\nReact Individual Character Input Boxes (RICIBs) are individual inputs that are separate from each other but functionally act similar as a regular input box. Motivation came from Apples similar input boxes used for their two-factor authorization: apple input boxes\n\n[View Demo](http://dannyradden.com/reactinputboxes) [View Github](https://github.com/dannyradden/single-character-input-boxes)\n\nInstallation\n------------\n\n`$ npm i --save react-individual-character-input-boxes`\n\nHow To Use\n----------\n\nImport:\n\n```js\nimport RICIBs from 'react-individual-character-input-boxes';\n```\n\nExample code:\n\n```js\nhandleOutput (string) {\n // Do something with the string\n }\n\n render () {\n return (\n \u003cdiv>\n \u003cRICIBs\n amount={5}\n handleOutputString={this.handleOutput}\n inputRegExp={/^[0-9]$/}\n password\n />\n \u003c/div>\n )\n }\n```\n\nProps:\n\n| Prop | Type | Required | Description |\n| --- | --- | --- | --- |\n| `amount` | Number | | sets the number of input boxes. (default is 5) |\n| `autoFocus` | Boolean | | When true, the first input box will automatically be selected on page load. (default false) |\n| `handleOutputString` | Function | ✓ | Implement it to handle the string output of the module. |\n| `inputRegExp` | RegExp | | Tells the component which characters to allow as inputs. (default is `/^[0-9]$/` which is only numbers) |\n| `password` | Boolean | | Masks in the input if set as true (default is false) |\n\nHelp, I cant get it to work or I want a feature!\n------------------------------------------------\n\nPlease feel free to submit an issue if you are running into trouble or have an idea for additional functionality!\n\nTODO\n----\n\n* Highlight selected?\n* Allow paste (onPaste) with any input selected\n* Fix mobile and IE bugs.\n\nGitHub\n------","PublishedAt":"2020-07-14T00:35:56.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:7202":{"id":"7202","__typename":"UploadFile","formats":{"200":"IG6lCUU_Yrkh0T_JEBOH0aIbqu0=/200x0/React_Headless_Phone_Input_cd52eeba95.png","400":"16W8915apftNIzqkqbDJQlEq93Y=/400x0/React_Headless_Phone_Input_cd52eeba95.png","600":"2gYws7KODCMDMG5K8Q9F6wz8hCo=/600x0/React_Headless_Phone_Input_cd52eeba95.png","800":"84Skj1FMh2K9arj0NRmDJm9Fyxc=/800x0/React_Headless_Phone_Input_cd52eeba95.png","1200":"L-h2gHgPwhOpqCq94cqY67wtHVg=/1200x0/React_Headless_Phone_Input_cd52eeba95.png","1600":"SQCujYnQMKVm9i6b4fI1EzuMU-A=/1600x0/React_Headless_Phone_Input_cd52eeba95.png","2000":"oeWuYbCk5M14bkNZZmQC4KEvLwA=/2000x0/React_Headless_Phone_Input_cd52eeba95.png","default":"84Skj1FMh2K9arj0NRmDJm9Fyxc=/800x0/React_Headless_Phone_Input_cd52eeba95.png","general":"84Skj1FMh2K9arj0NRmDJm9Fyxc=/800x0/React_Headless_Phone_Input_cd52eeba95.png","blur_400":"mOBLBLXDSz99m7byUp-bDm8X-xc=/400x0/filters:blur(8)/React_Headless_Phone_Input_cd52eeba95.png","blur_600":"EYHRCB8fVUSS0SCP2czVRzWXqSQ=/600x0/filters:blur(8)/React_Headless_Phone_Input_cd52eeba95.png","blur_800":"_0V-Fp0RCXNd5A87EAsAh_MtY00=/800x0/filters:blur(8)/React_Headless_Phone_Input_cd52eeba95.png","blur_1200":"mH5Qxy6rIX68LoiF7Y38cTQkg0E=/1200x0/filters:blur(8)/React_Headless_Phone_Input_cd52eeba95.png","blur_1600":"JELHo416AajS905QqN9pIRRmtzc=/1600x0/filters:blur(8)/React_Headless_Phone_Input_cd52eeba95.png","mediaViewer":"L-h2gHgPwhOpqCq94cqY67wtHVg=/1200x0/React_Headless_Phone_Input_cd52eeba95.png","thumbnail":"16W8915apftNIzqkqbDJQlEq93Y=/400x0/React_Headless_Phone_Input_cd52eeba95.png"},"width":624,"height":392},"ContentsElastic:265493":{"id":"265493","__typename":"ContentsElastic","Title":"Headless phone number input component for React","Slug":"headless-phone-number-input-component-for-react","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7202"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/headless-phone-number-input-component-for-react/","Description":"A headless phone number input component built for usability.","Body":"React Headless Phone Input\n--------------------------\n\nA headless phone number input component built for usability.\n\nPhone numbers are hard. Users expect to be able to enter phone numbers in the format they're used to. Here's the problem: most people are used to national - or even local phone number formats. If you offload phone number validation to your backend (or an API), resolving the ambiguity becomes difficult or even impossible.\n\nThis component helps you build a UI that gracefully guides your users towards unambiguous phone number formats. And you get the result in standard e164 format: ready for use with any telephony service.\n\nOther libraries are generally heavy (phone number rulesets can be big - 99.1% of this library's footprint is due to libphonenumber-js), force you to use their UI, and can't handle copy & paste or edit-in-place. react-headless-phone-input is designed for usability-first, and lets you bring your own input components. In fact, your existing input fields will almost certainly work with no modifications. Plus, it supports optional lazy-loading with progressive enhancement powered by React Suspense.\n\nBuilt with React Hooks.\n\n[View Demo](https://codesandbox.io/s/react-headless-phone-input-demo-ygow2?file=/src/App.js) [View Github](https://github.com/benaubin/react-headless-phone-input)\n\nInstall\n-------\n\nInstall both react-headless-input and \\[libphonenumber-js\\]:\n\n```sh\nnpm i --save react-headless-phone-input libphonenumber-js\n```\n\nor\n\n```sh\nyarn add react-headless-phone-input libphonenumber-js\n```\n\nFeatures\n--------\n\n* 100% headless: Bring your own UI. You can use almost any input component you already have\n* Lets users copy & paste phone numbers of any format\n* Typescript support\n* Built-in lazy-loading with progressive enhancement (clocks in at 40KB without lazy-loading)\n* Detects the associated country, enabling international phone input.\n* Lets users copy & paste phone numbers of any format\n* Acts like a normal input: Doesn’t glitch if a user edits in-place or deletes template characters\n* Validates number plausibility\n* External state is standard e164 format\n\nExample\n-------\n\nThis library is headless: you bring your own UI, but it's almost as easy as using regular inputs.\n\nHere's an example using \\[tiny-flag-react\\] to show the flag associated with the number's country:\n\n```js\nimport TinyFlagReact from \"tiny-flag-react\";\nimport PhoneFormatter from \"react-headless-phone-input\";\n// import PhoneFormatter from \"react-headless-phone-input/lazy\"; RECOMMENDED\n\nconst [e164, setE164] = useState(\"\");\n\n\u003cPhoneFormatter defaultCountry=\"US\" value={e164} onChange={setE164}>\n {({ country, impossible, onBlur, onInputChange, inputValue }) => {\n return (\n \u003c>\n \u003cdiv style={{ display: \"flex\", alignItems: \"center\" }}>\n \u003cspan\n style={{\n fontSize: \"24px\",\n }}>\n {country ? (\n \u003cTinyFlagReact\n country={country}\n alt={country + \" flag\"}\n fallbackImageURL={`https://cdn.jsdelivr.net/npm/[email protected]/img/SVG/${country}.svg`}\n />\n ) : (\n \u003c>✆\u003c/>\n )}\n \u003c/span>\n \u003cinput\n type=\"tel\"\n value={inputValue}\n onBlur={onBlur}\n onChange={(e) => onInputChange(e.target.value)}\n />\n \u003c/div>\n {impossible && (\n \u003cdiv style={{ color: \"red\" }}>Impossible phone number\u003c/div>\n )}\n \u003c/>\n );\n }}\n\u003c/PhoneFormatter>;\n```\n\nPerformance\n-----------\n\nDue to this library's dependence on \\[libphonenumber-js\\], it clocks in at \\[38.7KB minified + gzipped\\]\\[bundlephobia\\]. \nTo improve your user's experience, react-headless-phone-component supports lazy loading with React Suspense with \nprogressive auto-enachement. If your bundler supports dynamic imports and are using a compatible version of React, \njust swap `react-headless-phone-input` for `react-headless-phone-input/lazy`.\n\nYour UI will render and can be used immediately. Once `react-headless-phone-input` loads, the component will be \nautomatically upgraded. No other changes are required.\n\n```js\nimport PhoneFormatter from \"react-headless-phone-input/lazy\";\n```\n\nGitHub\n------","PublishedAt":"2020-07-09T00:44:02.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"}]},"UploadFile:7215":{"id":"7215","__typename":"UploadFile","formats":{"200":"svWSg6Hmhgngy4wFLL4mEXGQyr8=/200x0/react_input_verification_code_d5a2a3bcfe.jpg","400":"D4JKtkzNeofFA20r6PTHM4f4v5g=/400x0/react_input_verification_code_d5a2a3bcfe.jpg","600":"xBCcdmkQpgdLCNuVi5Gesam0GaY=/600x0/react_input_verification_code_d5a2a3bcfe.jpg","800":"uvW0pYGM_-V0dwRXjVBdryMQdig=/800x0/react_input_verification_code_d5a2a3bcfe.jpg","1200":"YBk274COV1LGAqZp3Ui37dpzpns=/1200x0/react_input_verification_code_d5a2a3bcfe.jpg","1600":"7SAc3P-9b41zZfCzoO1ieFbapIE=/1600x0/react_input_verification_code_d5a2a3bcfe.jpg","2000":"2LRJ7M6Fon1bAQ3HjqeOmA3BAOs=/2000x0/react_input_verification_code_d5a2a3bcfe.jpg","default":"uvW0pYGM_-V0dwRXjVBdryMQdig=/800x0/react_input_verification_code_d5a2a3bcfe.jpg","general":"uvW0pYGM_-V0dwRXjVBdryMQdig=/800x0/react_input_verification_code_d5a2a3bcfe.jpg","blur_400":"eMlRJGE3VPn9r0WYAFDbXgm16uc=/400x0/filters:blur(8)/react_input_verification_code_d5a2a3bcfe.jpg","blur_600":"EhAaYHvo1ryTwP2FFJfVcMI1L1E=/600x0/filters:blur(8)/react_input_verification_code_d5a2a3bcfe.jpg","blur_800":"U9xT7aoc2Z-0G-rqzBwg2XFq6CE=/800x0/filters:blur(8)/react_input_verification_code_d5a2a3bcfe.jpg","blur_1200":"cxE_fPkrUFwF7m-l4JSDSpbupXo=/1200x0/filters:blur(8)/react_input_verification_code_d5a2a3bcfe.jpg","blur_1600":"TyKxOnAjdWvAH63xHSYd8X9FoJs=/1600x0/filters:blur(8)/react_input_verification_code_d5a2a3bcfe.jpg","mediaViewer":"YBk274COV1LGAqZp3Ui37dpzpns=/1200x0/react_input_verification_code_d5a2a3bcfe.jpg","thumbnail":"D4JKtkzNeofFA20r6PTHM4f4v5g=/400x0/react_input_verification_code_d5a2a3bcfe.jpg"},"width":579,"height":332},"ContentsElastic:265500":{"id":"265500","__typename":"ContentsElastic","Title":"An autocomplete verification code input with react","Slug":"an-autocomplete-verification-code-input-with-react","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7215"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/an-autocomplete-verification-code-input-with-react/","Description":"A verification code input, autocompletion friendly.","Body":"react-input-verification-code\n-----------------------------\n\nA verification code input, autocompletion friendly.\n\nExamples\n--------\n\n* Basic\n * [CodeSandbox](https://codesandbox.io/s/basic-6ejdp)\n * [Source](https://github.com/ugogo/react-input-verification-code/tree/master/examples/basic/src/index.tsx)\n* Custom Styles\n * [CodeSandbox](https://codesandbox.io/s/custom-styles-bw8s4)\n * [Source](https://github.com/ugogo/react-input-verification-code/tree/master/examples/custom-styles/src/index.tsx)\n\nInstall\n-------\n\n```bash\nnpm install --save react-input-verification-code\n```\n\n```bash\nyarn add react-input-verification-code\n```\n\nUsage\n-----\n\n```tsx\nimport * as React from 'react';\nimport ReactInputVerificationCode from 'react-input-verification-code';\nimport 'react-input-verification-code/dist/index.css';\n\nexport default function App() {\n return \u003cReactInputVerificationCode />;\n}\n```\n\nAPI\n---\n\n| Key | Type | Default | Required | Description |\n| --- | --- | --- | --- | --- |\n| length | `number` | `4` | false | How many items will be rendered |\n| onChange | `function` | | true | Function called when the value changes |\n| placeholder | `string` | `·` | false | String rendered in each item when no value has been typed |\n\nGitHub\n------","PublishedAt":"2020-06-25T11:34: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":"input"}],"Categories":[{"__typename":"Keywords","Slug":"input"}]},"UploadFile:7428":{"id":"7428","__typename":"UploadFile","formats":{"200":"skc-Ampr78hajR5TanTyX5dmrTU=/200x0/react_intl_currency_input_00b8156651.png","400":"5kQw8NtYGjuB3ULrOLkwN7QYaEI=/400x0/react_intl_currency_input_00b8156651.png","600":"dFTapJic-zSOZkkF_lgcaPxMj18=/600x0/react_intl_currency_input_00b8156651.png","800":"UlWD4pxuqZq_STBFytG9-eWlnPI=/800x0/react_intl_currency_input_00b8156651.png","1200":"0u7v_MAppbtFbT6ZOxZsQ6tTcaE=/1200x0/react_intl_currency_input_00b8156651.png","1600":"A79T6k38nAlkumg2QkHdHSEgGbg=/1600x0/react_intl_currency_input_00b8156651.png","2000":"jAvDZ46Cwi660At3WtEKhE3dilA=/2000x0/react_intl_currency_input_00b8156651.png","default":"UlWD4pxuqZq_STBFytG9-eWlnPI=/800x0/react_intl_currency_input_00b8156651.png","general":"UlWD4pxuqZq_STBFytG9-eWlnPI=/800x0/react_intl_currency_input_00b8156651.png","blur_400":"_qLyx8Cpsc9QTqD-UQlXLIYIaMg=/400x0/filters:blur(8)/react_intl_currency_input_00b8156651.png","blur_600":"NiO9iCjT4wsG9o9MHvwv6yXaMtg=/600x0/filters:blur(8)/react_intl_currency_input_00b8156651.png","blur_800":"hCnO_RbQ-5XNGBONAEnNjd2apLw=/800x0/filters:blur(8)/react_intl_currency_input_00b8156651.png","blur_1200":"ulWwl-M64xuLbYc_X-ovpvlUukU=/1200x0/filters:blur(8)/react_intl_currency_input_00b8156651.png","blur_1600":"x3cq-znw5znVKB3cLTWf4FhVPoE=/1600x0/filters:blur(8)/react_intl_currency_input_00b8156651.png","mediaViewer":"0u7v_MAppbtFbT6ZOxZsQ6tTcaE=/1200x0/react_intl_currency_input_00b8156651.png","thumbnail":"5kQw8NtYGjuB3ULrOLkwN7QYaEI=/400x0/react_intl_currency_input_00b8156651.png"},"width":541,"height":362},"UploadFile:7429":{"id":"7429","__typename":"UploadFile","formats":{"200":"XHk5XbaGE1fk1101GdpXXyUgS9w=/200x0/react_intl_currency_input_92a9411736.gif","400":"Y6Ox2wvG_pUmErSyovZyP5DQRBA=/400x0/react_intl_currency_input_92a9411736.gif","600":"GQ4QiFWQUGTFko-K5ary1SB6xqo=/600x0/react_intl_currency_input_92a9411736.gif","800":"ugEz1BLGzdZlTEu1rgVURF-za2M=/800x0/react_intl_currency_input_92a9411736.gif","1200":"RpIuLSk1HW3rdKdk35gvB4TiSwQ=/1200x0/react_intl_currency_input_92a9411736.gif","1600":"bkZNaM2ovZW5mTPW_ksJfQ1PbBY=/1600x0/react_intl_currency_input_92a9411736.gif","2000":"YT3F-BNM7FxJT0kchAj_wO6P8ls=/2000x0/react_intl_currency_input_92a9411736.gif","default":"ugEz1BLGzdZlTEu1rgVURF-za2M=/800x0/react_intl_currency_input_92a9411736.gif","general":"ugEz1BLGzdZlTEu1rgVURF-za2M=/800x0/react_intl_currency_input_92a9411736.gif","blur_400":"hKywyB-l3ae3onfMkv9ax3cZHmk=/400x0/filters:blur(8)/react_intl_currency_input_92a9411736.gif","blur_600":"BvmCn6X5phI763j73JT-BNBNdpI=/600x0/filters:blur(8)/react_intl_currency_input_92a9411736.gif","blur_800":"Os9lAwzVSM3jVD0DJWP4Dor1fJE=/800x0/filters:blur(8)/react_intl_currency_input_92a9411736.gif","blur_1200":"NNOFMhYKp_eXu348LXLVf6tyih0=/1200x0/filters:blur(8)/react_intl_currency_input_92a9411736.gif","blur_1600":"9i6fHChu6scCtBALQ73T0ZvSE1A=/1600x0/filters:blur(8)/react_intl_currency_input_92a9411736.gif","mediaViewer":"RpIuLSk1HW3rdKdk35gvB4TiSwQ=/1200x0/react_intl_currency_input_92a9411736.gif","thumbnail":"Y6Ox2wvG_pUmErSyovZyP5DQRBA=/400x0/react_intl_currency_input_92a9411736.gif"},"width":355,"height":315},"ContentsElastic:265610":{"id":"265610","__typename":"ContentsElastic","Title":"React component for i18n currency input using Intl API","Slug":"react-component-for-i18n-currency-input-using-intl-api","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7428"}},{"__typename":"ComponentMediaMediaItems","Purpose":"post-image","URL":null,"File":{"__ref":"UploadFile:7429"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/react-component-for-i18n-currency-input-using-intl-api/","Description":"A React component for i18n currency input using Intl API.","Body":"react-intl-currency-input\n-------------------------\n\nA React component for i18n currency input using Intl API.\n\n### Installation\n\n```sh\n$ npm install react-intl-currency-input --save-dev\n```\n\n### How to use\n\n```js\nimport React from \"react\"\nimport IntlCurrencyInput from \"react-intl-currency-input\"\n\nconst currencyConfig = {\n locale: \"pt-BR\",\n formats: {\n number: {\n BRL: {\n style: \"currency\",\n currency: \"BRL\",\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n },\n },\n },\n};\n\nconst BrlCurrencyComponent = () => {\n const handleChange = (event, value, maskedValue) => {\n event.preventDefault();\n\n console.log(value); // value without mask (ex: 1234.56)\n console.log(maskedValue); // masked value (ex: R$1234,56)\n };\n\n return(\n \u003cIntlCurrencyInput currency=\"BRL\" config={currencyConfig}\n onChange={handleChange} />\n );\n}\n\nexport default BrlCurrencyComponent;\n\n```\n\n### Example\n\n![react-intl-currency-input](ugEz1BLGzdZlTEu1rgVURF-za2M=/800x0/react_intl_currency_input_92a9411736.gif)\n\nTo run the example:\n\n```sh\n$ npm run example:start\n```\n\nAnd a new browser window will open at [http://localhost:3000](http://localhost:3000)\n\n### Properties\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| currency | string | USD | Sets the [currency code](http://www.xe.com/iso4217.php) |\n| config | object | USD related configuration | Configuration object compliant with react-intl [intlShape](https://github.com/yahoo/react-intl/wiki/API#intlshape) |\n| autoFocus | boolean | false | Enables auto-focus when the component gets displayed |\n| autoSelect | boolean | false | Enables auto-select when the component gets displayed |\n| autoReset | boolean | false | Resets component's internal state when loses focus |\n| onChange | function | undefined | `(event, value, maskedValued) => {}` \u003cbr> \u003cbr>Exposes the `Event` itself, the `value` with no mask and `maskedValue` for displaying purposes |\n| onFocus | function | undefined | `(event, value, maskedValued) => {` \u003cbr> \u003cbr>Called when the component gains focus |\n| onBlur | function | undefined | `(event, value, maskedValued) => {` \u003cbr> \u003cbr>Called when the component loses focus |\n| onKeyPress | function | undefined | `(event, key, keyCode) => {}` \u003cbr> \u003cbr>Called when a `key` is pressed |\n| max | number | undefined | maximum value for the input. Input does not change if the value is greater than max |\n\nAll other undocumented properties available for any `React Component` should be available.\n\nGitHub\n------","PublishedAt":"2020-02-27T02:24:55.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:7584":{"id":"7584","__typename":"UploadFile","formats":{"200":"cc0DLM53Ia_BajAYKGamkugw3og=/200x0/react_otp_input_c375d28471.jpg","400":"EnzGkSZuNwwzbNWj_LQE8h2ky2g=/400x0/react_otp_input_c375d28471.jpg","600":"dBWVuLx8lzHy45MN4_R_xyLThcY=/600x0/react_otp_input_c375d28471.jpg","800":"KH0cCNg2aeW68kbUCT5wUfRC3Oo=/800x0/react_otp_input_c375d28471.jpg","1200":"2d2FbPBr4W-C_flGlUyQq8b-j3k=/1200x0/react_otp_input_c375d28471.jpg","1600":"HpjhTrryy5PMWISVveKSFdKI9dE=/1600x0/react_otp_input_c375d28471.jpg","2000":"eDEbN7JZ58Jq9pvesV2s0mSiiJk=/2000x0/react_otp_input_c375d28471.jpg","default":"KH0cCNg2aeW68kbUCT5wUfRC3Oo=/800x0/react_otp_input_c375d28471.jpg","general":"KH0cCNg2aeW68kbUCT5wUfRC3Oo=/800x0/react_otp_input_c375d28471.jpg","blur_400":"6UEzETjoz1UxBRPUpd0RJEFWALc=/400x0/filters:blur(8)/react_otp_input_c375d28471.jpg","blur_600":"ZZLYzWLJuqDqaFO7tY-0HvKofQs=/600x0/filters:blur(8)/react_otp_input_c375d28471.jpg","blur_800":"axZmNZLjQAnSN9mfJaROj-LTAkk=/800x0/filters:blur(8)/react_otp_input_c375d28471.jpg","blur_1200":"tjtZYD75ad6GnVNSDch8Y1O_X6A=/1200x0/filters:blur(8)/react_otp_input_c375d28471.jpg","blur_1600":"U9sEs8fHVOKxS_4csa5sjOAdZek=/1600x0/filters:blur(8)/react_otp_input_c375d28471.jpg","mediaViewer":"2d2FbPBr4W-C_flGlUyQq8b-j3k=/1200x0/react_otp_input_c375d28471.jpg","thumbnail":"EnzGkSZuNwwzbNWj_LQE8h2ky2g=/400x0/react_otp_input_c375d28471.jpg"},"width":473,"height":295},"UploadFile:7585":{"id":"7585","__typename":"UploadFile","formats":{"200":"7uXg5P5FNKofSqegoMCLHPfcUV4=/200x0/react_otp_input_1e5e0da76d.gif","400":"gZtBnXbIJ3fePMhWBjqciK4wpNk=/400x0/react_otp_input_1e5e0da76d.gif","600":"JmtMDV12q1ucM0iQdME0a83Cocs=/600x0/react_otp_input_1e5e0da76d.gif","800":"NjPtvT4KMUmgIMyjzTvXsWaDpzA=/800x0/react_otp_input_1e5e0da76d.gif","1200":"Ws9N8SEglVWGMU3AEZ0_f9jENdM=/1200x0/react_otp_input_1e5e0da76d.gif","1600":"c7xUmoRCsNmwnsK6DhSxhMB1CsU=/1600x0/react_otp_input_1e5e0da76d.gif","2000":"v8cIGGPzb4cQYS9HCQVkVLM198I=/2000x0/react_otp_input_1e5e0da76d.gif","default":"NjPtvT4KMUmgIMyjzTvXsWaDpzA=/800x0/react_otp_input_1e5e0da76d.gif","general":"NjPtvT4KMUmgIMyjzTvXsWaDpzA=/800x0/react_otp_input_1e5e0da76d.gif","blur_400":"j8_gPPUKDSurczHjiblS4hgeR3Q=/400x0/filters:blur(8)/react_otp_input_1e5e0da76d.gif","blur_600":"2Nv05_jPvMKmYOemuNh-LD8ppxM=/600x0/filters:blur(8)/react_otp_input_1e5e0da76d.gif","blur_800":"3OY4mwo2HaoDqYusUbLYzaoK5Xg=/800x0/filters:blur(8)/react_otp_input_1e5e0da76d.gif","blur_1200":"4RpjgIKXMSao_ZaA5AJC7BrDiRs=/1200x0/filters:blur(8)/react_otp_input_1e5e0da76d.gif","blur_1600":"t14D04ZXFW-p5NGevL5NmH9xPaA=/1600x0/filters:blur(8)/react_otp_input_1e5e0da76d.gif","mediaViewer":"Ws9N8SEglVWGMU3AEZ0_f9jENdM=/1200x0/react_otp_input_1e5e0da76d.gif","thumbnail":"gZtBnXbIJ3fePMhWBjqciK4wpNk=/400x0/react_otp_input_1e5e0da76d.gif"},"width":480,"height":299},"ContentsElastic:265715":{"id":"265715","__typename":"ContentsElastic","Title":"OTP Input Component for React","Slug":"otp-input-component-for-react","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7584"}},{"__typename":"ComponentMediaMediaItems","Purpose":"post-image","URL":null,"File":{"__ref":"UploadFile:7585"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/otp-input-component-for-react/","Description":"A fully customizable, one-time password input component for the web built with React.","Body":"react-otp-input\n---------------\n\nA fully customizable, one-time password input component for the web built with React.\n\n[View demo](https://trendmicro-frontend.github.io/react-dropdown/) [View Github](https://github.com/devfolioco/react-otp-input)\n\n![react-otp-input](NjPtvT4KMUmgIMyjzTvXsWaDpzA=/800x0/react_otp_input_1e5e0da76d.gif)\n\nInstallation\n------------\n\n[![NPM](https://nodei.co/npm/react-otp-input.png?compact=true)](https://nodei.co/npm/react-otp-input/)\n\nTo install the latest stable version:\n\n```\nnpm install --save react-otp-input\n```\n\nBasic usage:\n\n```javascript\nimport React, { Component } from 'react';\nimport OtpInput from 'react-otp-input';\n\nexport default class App extends Component {\n state = {\n otp: '',\n };\n\n handleChange = otp => this.setState({ otp });\n\n render() {\n return (\n \u003cdiv>\n \u003cOtpInput\n onChange={this.handleChange}\n numInputs={6}\n separator={\u003cspan>-\u003c/span>}\n />\n \u003c/div>\n );\n }\n}\n```\n\nAPI\n---\n\n| Name | Type | Required | Default | Description |\n| --- | --- | --- | --- | --- |\n| numInputs | number | true | 4 | Number of OTP inputs to be rendered. |\n| onChange | function | true | console.log | Returns OTP code typed in inputs. |\n| value | string / number | true | '' | The value of the OTP passed into the component. |\n| separator | component | false | none | Provide a custom separator between inputs by passing a component. For instance, `\u003cspan>-\u003c/span>` would add `-` between each input |\n| containerStyle | style (object) / className (string) | false | none | Style applied or class passed to container of inputs. |\n| inputStyle | style (object) / className (string) | false | none | Style applied or class passed to each input. |\n| focusStyle | style (object) / className (string) | false | none | Style applied or class passed to inputs on focus. |\n| isDisabled | boolean | false | false | Disables all the inputs. |\n| disabledStyle | style (object) / className (string) | false | none | Style applied or class passed to each input when disabled. |\n| hasErrored | boolean | false | false | Indicates there is an error in the inputs. |\n| errorStyle | style (object) / className (string) | false | none | Style applied or class passed to each input when errored. |\n| shouldAutoFocus | boolean | false | false | Auto focuses input on initial page load. |\n| isInputNum | boolean | false | false | Restrict input to only numbers. |\n\nBreaking changes when porting to v1.0.0\n---------------------------------------\n\n`react-otp-input` is now a controlled component to facilitate functionalities that weren't possible before from the application using it, such as clearing or pre-assigning values. For `v1.0.0` and above, a `value` prop needs to be passed in the component for it to function as expected.\n\nDevelopment\n-----------\n\nTo run the development server:\n\n```\nnpm run dev\n```\n\nTo run the development server for example:\n\n```\nnpm run docs\n```\n\nTo make a production build of the example:\n\n```\nnpm run docs:prod\n```\n\nChecklist\n---------\n\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat&logo=github)](https://github.com/devfolioco/react-otp-input/pulls) [![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/devfolioco/react-otp-input)\n\n* \\[x\\] Add flowtypes\n* \\[x\\] Add ESLint, Prettier for code quality\n* \\[x\\] Add styling support for states including focus/disabled\n* \\[ \\] Travis CI, Codecov\n* \\[ \\] Write tests\n\nGitHub\n------","PublishedAt":"2019-11-04T09:15:33.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:7690":{"id":"7690","__typename":"UploadFile","formats":{"200":"-HnK7g4rsGxjMDeF91V59utz3aI=/200x0/React_Payment_Inputs_0553e316c2.jpg","400":"Es02yLhLXPEJD_G6LRVE8Mowyw8=/400x0/React_Payment_Inputs_0553e316c2.jpg","600":"6QTxndu8iv0Y6zwc7tMe82QTBXA=/600x0/React_Payment_Inputs_0553e316c2.jpg","800":"jLzcLz6TYAw-f_syorM7xJcAWCg=/800x0/React_Payment_Inputs_0553e316c2.jpg","1200":"6JNToj0uw03GAErO83IytQUOfdU=/1200x0/React_Payment_Inputs_0553e316c2.jpg","1600":"Fgd2MLsTL-TIwVT_4aEW6Xu1hB8=/1600x0/React_Payment_Inputs_0553e316c2.jpg","2000":"WF3hh9KrBcIofTfUyJPGx7q60QY=/2000x0/React_Payment_Inputs_0553e316c2.jpg","default":"jLzcLz6TYAw-f_syorM7xJcAWCg=/800x0/React_Payment_Inputs_0553e316c2.jpg","general":"jLzcLz6TYAw-f_syorM7xJcAWCg=/800x0/React_Payment_Inputs_0553e316c2.jpg","blur_400":"ezsdLYbYDhNqzPWqBileQXmJlPo=/400x0/filters:blur(8)/React_Payment_Inputs_0553e316c2.jpg","blur_600":"uHMIrxTCtKs8sJQfZ9D9Ks__noc=/600x0/filters:blur(8)/React_Payment_Inputs_0553e316c2.jpg","blur_800":"fAtsU5_j6fII1oAP-pvQMLu_V1s=/800x0/filters:blur(8)/React_Payment_Inputs_0553e316c2.jpg","blur_1200":"L8qafuKQ4rOgYgGQeBXiC8CE5Pg=/1200x0/filters:blur(8)/React_Payment_Inputs_0553e316c2.jpg","blur_1600":"Bf4gR08VHtrVdNfuiM9G7sN2yKo=/1600x0/filters:blur(8)/React_Payment_Inputs_0553e316c2.jpg","mediaViewer":"6JNToj0uw03GAErO83IytQUOfdU=/1200x0/React_Payment_Inputs_0553e316c2.jpg","thumbnail":"Es02yLhLXPEJD_G6LRVE8Mowyw8=/400x0/React_Payment_Inputs_0553e316c2.jpg"},"width":595,"height":367},"UploadFile:7691":{"id":"7691","__typename":"UploadFile","formats":{"200":"rZyPcXLRT4CzLwuLsqY2wQIcvEs=/200x0/basic_a1e7e6fe67.gif","400":"wZe_OZmN2SRdvvoo5M7lIuc8cQ8=/400x0/basic_a1e7e6fe67.gif","600":"rs5yK87zmr-qHzHXN84mibZbP7A=/600x0/basic_a1e7e6fe67.gif","800":"P_xq7L_NiOjMDQ3ylGa3zoeKJ7c=/800x0/basic_a1e7e6fe67.gif","1200":"NN7IeDUwG5OTMm7bCpzyCfi4T0s=/1200x0/basic_a1e7e6fe67.gif","1600":"RpeXOG_aewYQcrhC4_HBkUKpwXM=/1600x0/basic_a1e7e6fe67.gif","2000":"tyFk11PXADhj-OUyLD6UGdB3GTM=/2000x0/basic_a1e7e6fe67.gif","default":"P_xq7L_NiOjMDQ3ylGa3zoeKJ7c=/800x0/basic_a1e7e6fe67.gif","general":"P_xq7L_NiOjMDQ3ylGa3zoeKJ7c=/800x0/basic_a1e7e6fe67.gif","blur_400":"fVmyX0a3nmDcRspiS8_m2UDZBag=/400x0/filters:blur(8)/basic_a1e7e6fe67.gif","blur_600":"V1Um-kSO7Ai7B7NTwtyJvbK7G0o=/600x0/filters:blur(8)/basic_a1e7e6fe67.gif","blur_800":"ebls4JjS_XceJM0Ax0BWLw3IM70=/800x0/filters:blur(8)/basic_a1e7e6fe67.gif","blur_1200":"V6hKKQgF55F8xB4lW2NRu3D-XYE=/1200x0/filters:blur(8)/basic_a1e7e6fe67.gif","blur_1600":"mFvnqswnL0mYOKBe1WZK6eMSwDw=/1600x0/filters:blur(8)/basic_a1e7e6fe67.gif","mediaViewer":"NN7IeDUwG5OTMm7bCpzyCfi4T0s=/1200x0/basic_a1e7e6fe67.gif","thumbnail":"wZe_OZmN2SRdvvoo5M7lIuc8cQ8=/400x0/basic_a1e7e6fe67.gif"},"width":382,"height":252},"UploadFile:7692":{"id":"7692","__typename":"UploadFile","formats":{"200":"BF090c9tqX4WMC5XNACNhtqmODE=/200x0/wrapper_2d18b2713f.gif","400":"VU9NoKfsjdzNd2G9ZihCOH4mWjE=/400x0/wrapper_2d18b2713f.gif","600":"e5wFFbtGoLWpX8mIiwAkTtAVSNI=/600x0/wrapper_2d18b2713f.gif","800":"CHFTW6j0Sj42i2S9CV-_bV_PwTk=/800x0/wrapper_2d18b2713f.gif","1200":"DYg59Omjt-Sf1IfUUDcca9Mj324=/1200x0/wrapper_2d18b2713f.gif","1600":"ZjfZAswy_U4yoqWHLGSh7FyMqhk=/1600x0/wrapper_2d18b2713f.gif","2000":"qzY28ugOYlG2UYziPIugxkIyJ2k=/2000x0/wrapper_2d18b2713f.gif","default":"CHFTW6j0Sj42i2S9CV-_bV_PwTk=/800x0/wrapper_2d18b2713f.gif","general":"CHFTW6j0Sj42i2S9CV-_bV_PwTk=/800x0/wrapper_2d18b2713f.gif","blur_400":"BlBZ9JhUCrWS4O5peVfUjK0mFdc=/400x0/filters:blur(8)/wrapper_2d18b2713f.gif","blur_600":"IGsGtk2ayiuS-XPhnHm50I66lAA=/600x0/filters:blur(8)/wrapper_2d18b2713f.gif","blur_800":"yT4wiZkUT3YvKUXeN8d3diTFRBM=/800x0/filters:blur(8)/wrapper_2d18b2713f.gif","blur_1200":"42dallgfPNaue8ZljZlhJobiCzI=/1200x0/filters:blur(8)/wrapper_2d18b2713f.gif","blur_1600":"ULyROBb0X8CNMH1QDxnf0jDKACY=/1600x0/filters:blur(8)/wrapper_2d18b2713f.gif","mediaViewer":"DYg59Omjt-Sf1IfUUDcca9Mj324=/1200x0/wrapper_2d18b2713f.gif","thumbnail":"VU9NoKfsjdzNd2G9ZihCOH4mWjE=/400x0/wrapper_2d18b2713f.gif"},"width":720,"height":162},"UploadFile:7693":{"id":"7693","__typename":"UploadFile","formats":{"200":"EipJGFZWSefj1e22Ux2gMOIal5A=/200x0/fannypack_ee39fa6500.gif","400":"I63NKCzLb9E81INd1NORC3_t5V0=/400x0/fannypack_ee39fa6500.gif","600":"W8fndjw8pz4uh56PphpI3E0y2H0=/600x0/fannypack_ee39fa6500.gif","800":"qJ3pLTUIjgQa4ymx5gu-6-4aN7c=/800x0/fannypack_ee39fa6500.gif","1200":"KC1WnGwvvWnsi3XsdO3qlGzD6GQ=/1200x0/fannypack_ee39fa6500.gif","1600":"RxbYETQUpDOo682pf-N3O8BTohs=/1600x0/fannypack_ee39fa6500.gif","2000":"O8abNR76zXzJcLIZD6VDzFgWpx0=/2000x0/fannypack_ee39fa6500.gif","default":"qJ3pLTUIjgQa4ymx5gu-6-4aN7c=/800x0/fannypack_ee39fa6500.gif","general":"qJ3pLTUIjgQa4ymx5gu-6-4aN7c=/800x0/fannypack_ee39fa6500.gif","blur_400":"K-48GU9CMY3jjl4YWeLBiIs07Bw=/400x0/filters:blur(8)/fannypack_ee39fa6500.gif","blur_600":"iqNRJRqNMBJ6_Yjut7Cry7B0pA8=/600x0/filters:blur(8)/fannypack_ee39fa6500.gif","blur_800":"iW_r8C6794UeAhcb7SyplOEyKpk=/800x0/filters:blur(8)/fannypack_ee39fa6500.gif","blur_1200":"6a4-QRbqcRsrBb9N7i2fSPo-xsI=/1200x0/filters:blur(8)/fannypack_ee39fa6500.gif","blur_1600":"FgBjIAhwXYi8pUIixl6c5eoQoPU=/1600x0/filters:blur(8)/fannypack_ee39fa6500.gif","mediaViewer":"KC1WnGwvvWnsi3XsdO3qlGzD6GQ=/1200x0/fannypack_ee39fa6500.gif","thumbnail":"I63NKCzLb9E81INd1NORC3_t5V0=/400x0/fannypack_ee39fa6500.gif"},"width":1042,"height":182},"UploadFile:7694":{"id":"7694","__typename":"UploadFile","formats":{"200":"CYJ_0_LQUX4k9HzUCA2OotXwSnI=/200x0/bootstrap_b76716e793.gif","400":"0wfqR8ym507lq1UhefyBI8oKYAc=/400x0/bootstrap_b76716e793.gif","600":"IWf4Ar9gWK3QP0o0VJGnbHqfaOs=/600x0/bootstrap_b76716e793.gif","800":"AqVz8Kc3MNq7G2TpLkdYViBcbWM=/800x0/bootstrap_b76716e793.gif","1200":"xyVTC3uFCB4ck7Y9agIbK3HYrck=/1200x0/bootstrap_b76716e793.gif","1600":"HkADq_X2ig_Ng1kPH2OVjrFv3TQ=/1600x0/bootstrap_b76716e793.gif","2000":"IAMPcwiYyHimN_bA-ZRHYNLxYHM=/2000x0/bootstrap_b76716e793.gif","default":"AqVz8Kc3MNq7G2TpLkdYViBcbWM=/800x0/bootstrap_b76716e793.gif","general":"AqVz8Kc3MNq7G2TpLkdYViBcbWM=/800x0/bootstrap_b76716e793.gif","blur_400":"7gE5jexIwVcLxsRtYwP659hPeoo=/400x0/filters:blur(8)/bootstrap_b76716e793.gif","blur_600":"vRSMcPFcaUXVSdS4Nfwgag4nNoc=/600x0/filters:blur(8)/bootstrap_b76716e793.gif","blur_800":"LQwBz55iwXRJ9EzXQE_KNhveF1k=/800x0/filters:blur(8)/bootstrap_b76716e793.gif","blur_1200":"H4Qjk6TkWnoEpevRn2xcBIFMAbc=/1200x0/filters:blur(8)/bootstrap_b76716e793.gif","blur_1600":"RaAdhzX4pKnF_UjG9_E7gLYHSHs=/1600x0/filters:blur(8)/bootstrap_b76716e793.gif","mediaViewer":"xyVTC3uFCB4ck7Y9agIbK3HYrck=/1200x0/bootstrap_b76716e793.gif","thumbnail":"0wfqR8ym507lq1UhefyBI8oKYAc=/400x0/bootstrap_b76716e793.gif"},"width":1042,"height":224},"ContentsElastic:265782":{"id":"265782","__typename":"ContentsElastic","Title":"React payment card input fields","Slug":"react-payment-card-input-fields","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7690"}},{"__typename":"ComponentMediaMediaItems","Purpose":"post-image","URL":null,"File":{"__ref":"UploadFile:7691"}},{"__typename":"ComponentMediaMediaItems","Purpose":"post-image","URL":null,"File":{"__ref":"UploadFile:7692"}},{"__typename":"ComponentMediaMediaItems","Purpose":"post-image","URL":null,"File":{"__ref":"UploadFile:7693"}},{"__typename":"ComponentMediaMediaItems","Purpose":"post-image","URL":null,"File":{"__ref":"UploadFile:7694"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/a-zero-dependency-react-hook-container-to-help-with-payment-card-input-fields/","Description":"A zero-dependency React Hook & Container to help with payment card input fields.","Body":"React Payment Inputs\n--------------------\n\nA zero-dependency React Hook & Container to help with payment card input fields.\n\n[View demo](https://medipass.github.io/react-payment-inputs/) [View Github](https://github.com/medipass/react-payment-inputs)\n\nRequirements\n------------\n\nEnsure you are running on a hooks-compatible version of React (v16.8 & above).\n\nInstallation\n------------\n\n```\nnpm install react-payment-inputs styled-components --save\n```\n\nor install with [Yarn](https://yarnpkg.com) if you prefer:\n\n```\nyarn add react-payment-inputs styled-components\n```\n\n> React Payment Inputs requires [styled-components](https://styled-components.com) to be installed as a dependency.\n\nUsage\n-----\n\n![basic](P_xq7L_NiOjMDQ3ylGa3zoeKJ7c=/800x0/basic_a1e7e6fe67.gif)\n\nBy default (as seen above), React Payment Inputs does not come with built-in styling meaning that you can easily adapt React Payment Inputs to your own design system.\n\nHowever, if you would like to use the built-in styles as seen in the animation above, [read \"Using the built-in styled wrapper\"](#using-the-built-in-styled-wrapper).\n\n### With hooks\n\nIf you'd like to use the hooks version of React Payment Inputs, you can import `usePaymentInputs` into your component.\n\n```jsx\nimport React from 'react';\nimport { usePaymentInputs } from 'react-payment-inputs';\n\nexport default function PaymentInputs() {\n const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps } = usePaymentInputs();\n\n return (\n \u003cdiv>\n \u003cinput {...getCardNumberProps({ onChange: handleChangeCardNumber })} value={cardNumber} />\n \u003cinput {...getExpiryDateProps({ onChange: handleChangeExpiryDate })} value={expiryDate} />\n \u003cinput {...getCVCProps({ onChange: handleChangeCVC })} value={cvc} />\n {meta.isTouched && meta.error && \u003cspan>Error: {meta.error}\u003c/span>}\n \u003c/div>\n );\n}\n```\n\n> By spreading the prop getter functions (e.g. `{...getCardNumberProps()}`) on the inputs as shown above, React Payment Inputs will automatically handle the formatting, focus & validation logic for you.\n\n> **IMPORTANT:** You must place your event handlers (e.g. `onChange`, `onBlur`, etc) inside the prop getter function (e.g. `getCardNumberProps()`) so the default event handlers in React Payment Inputs don't get overridden.\n\n### With render props\n\nIf you'd like to use the render props version of React Payment Inputs, you can import `PaymentInputsContainer` into your component.\n\nThe **props** of `\u003cPaymentInputsContainer>` are the same as the hook [options](#options) and the **render props** are the same as the hook [data](#data).\n\n```jsx\nimport React from 'react';\nimport { PaymentInputsContainer } from 'react-payment-inputs';\n\nexport default function PaymentInputs() {\n return (\n \u003cPaymentInputsContainer>\n {({ meta, getCardNumberProps, getExpiryDateProps, getCVCProps }) => (\n \u003cdiv>\n \u003cinput {...getCardNumberProps({ onChange: handleChangeCardNumber })} value={cardNumber} />\n \u003cinput {...getExpiryDateProps({ onChange: handleChangeExpiryDate })} value={expiryDate} />\n \u003cinput {...getCVCProps({ onChange: handleChangeCVC })} value={cvc} />\n {meta.isTouched && meta.error && \u003cspan>Error: {meta.error}\u003c/span>}\n \u003c/div>\n )}\n \u003c/PaymentInputsContainer>\n );\n}\n```\n\n> **IMPORTANT:** You must place your event handlers (e.g. `onChange`, `onBlur`, etc) inside the prop getter function (e.g. `getCardNumberProps()`) so the default event handlers in React Payment Inputs don't get overridden.\n\n### Using the built-in styled wrapper\n\nBy default, React Payment Inputs does not have built-in styling for it's inputs. However, React Payment Inputs comes with a styled wrapper which combines the card number, expiry & CVC fields seen below:\n\n![wrapper](CHFTW6j0Sj42i2S9CV-_bV_PwTk=/800x0/wrapper_2d18b2713f.gif)\n\n```jsx\nimport React from 'react';\nimport { PaymentInputsWrapper, usePaymentInputs } from 'react-payment-inputs';\nimport images from 'react-payment-inputs/images';\n\nexport default function PaymentInputs() {\n const {\n wrapperProps,\n getCardImageProps,\n getCardNumberProps,\n getExpiryDateProps,\n getCVCProps\n } = usePaymentInputs();\n\n return (\n \u003cPaymentInputsWrapper {...wrapperProps}>\n \u003csvg {...getCardImageProps({ images })} />\n \u003cinput {...getCardNumberProps()} />\n \u003cinput {...getExpiryDateProps()} />\n \u003cinput {...getCVCProps()} />\n \u003c/PaymentInputsWrapper>\n );\n}\n```\n\n### More examples\n\n* [Storybook](https://medipass.github.io/react-payment-inputs)\n * [Source](./stories/index.stories.js)\n\n`data = usePaymentInputs(options)`\n----------------------------------\n\n> returns [an object (`data`)](#data)\n\n### options\n\n> `Object({ errorMessages, onBlur, onChange, onError, onTouch })`\n\n#### options.errorMessages\n\n> `Object`\n\nSet custom error messages for the inputs.\n\n##### Example\n\n```js\nconst ERROR_MESSAGES = {\n emptyCardNumber: 'El número de la tarjeta es inválido',\n invalidCardNumber: 'El número de la tarjeta es inválido',\n emptyExpiryDate: 'La fecha de expiración es inválida',\n monthOutOfRange: 'El mes de expiración debe estar entre 01 y 12',\n yearOutOfRange: 'El año de expiración no puede estar en el pasado',\n dateOutOfRange: 'La fecha de expiración no puede estar en el pasado',\n invalidExpiryDate: 'La fecha de expiración es inválida',\n emptyCVC: 'El código de seguridad es inválido',\n invalidCVC: 'El código de seguridad es inválido'\n}\n\nexport default function MyComponent() {\n const { ... } = usePaymentInputs({\n errorMessages: ERROR_MESSAGES\n });\n}\n```\n\n#### options.onBlur\n\n> `function(event)`\n\nFunction to handle the blur event on the inputs. It is invoked when any of the inputs blur.\n\n#### options.onChange\n\n> `function(event)`\n\nFunction to handle the change event on the inputs. It is invoked when any of the inputs change.\n\n#### options.onError\n\n> `function(error, erroredInputs)`\n\nFunction to invoke when any of the inputs error.\n\n#### options.onTouch\n\n> `function(touchedInput, touchedInputs)`\n\nFunction to invoke when any of the inputs are touched.\n\n### `data`\n\n#### getCardNumberProps\n\n> `function(overrideProps)` | returns `Object\u003cprops>`\n\nReturns the props to apply to the **card number** input.\n\n**IMPORTANT:** You must place your event handlers (e.g. `onChange`, `onBlur`, etc) inside the `getCardNumberProps()` so the default event handlers in React Payment Inputs don't get overridden.\n\n##### Example snippet\n\n```jsx\n\u003cinput {...getCardNumberProps({ onBlur: handleBlur, onChange: handleChange })} />\n```\n\n#### getExpiryDateProps\n\n> `function(overrideProps)` | returns `Object\u003cprops>`\n\nReturns the props to apply to the **expiry date** input.\n\n**IMPORTANT:** You must place your event handlers (e.g. `onChange`, `onBlur`, etc) inside the `getExpiryDateProps()` so the default event handlers in React Payment Inputs don't get overridden.\n\n##### Example snippet\n\n```jsx\n\u003cinput {...getExpiryDateProps({ onBlur: handleBlur, onChange: handleChange })} />\n```\n\n#### getCVCProps\n\n> `function(overrideProps)` | returns `Object\u003cprops>`\n\nReturns the props to apply to the **CVC** input.\n\n**IMPORTANT:** You must place your event handlers (e.g. `onChange`, `onBlur`, etc) inside the `getCVCProps()` so the default event handlers in React Payment Inputs don't get overridden.\n\n##### Example snippet\n\n```jsx\n\u003cinput {...getCVCProps({ onBlur: handleBlur, onChange: handleChange })} />\n```\n\n#### getZIPProps\n\n> `function(overrideProps)` | returns `Object\u003cprops>`\n\nReturns the props to apply to the **ZIP** input.\n\n**IMPORTANT:** You must place your event handlers (e.g. `onChange`, `onBlur`, etc) inside the `getZIPProps()` so the default event handlers in React Payment Inputs don't get overridden.\n\n##### Example snippet\n\n```jsx\n\u003cinput {...getZIPProps({ onBlur: handleBlur, onChange: handleChange })} />\n```\n\n#### getCardImageProps\n\n> `function({ images })` | returns `Object\u003cprops>`\n\nReturns the props to apply to the **card image** SVG.\n\nThis function only supports SVG elements currently. If you have a need for another format, please raise an issue.\n\nYou can also supply [custom card images](#custom-card-images) using the `images` attribute. The example below uses the default card images from React Payment Inputs.\n\n##### Example snippet\n\n```jsx\nimport images from 'react-payment-inputs/images';\n\n\u003csvg {...getCardImageProps({ images })} />\n```\n\n#### meta.cardType\n\n> Object\n\nReturns information about the current card type, including: name, lengths and formats.\n\n##### Example snippet\n\n```jsx\nconst { meta } = usePaymentInputs();\n\n\u003cspan>Current card: {meta.cardType.displayName}\u003c/span>\n```\n\n#### meta.error\n\n> string\n\nReturns the current global error between all rendered inputs.\n\n##### Example snippet\n\n```jsx\nconst { meta } = usePaymentInputs();\n\nconsole.log(meta.error); // \"Card number is invalid\"\n```\n\n#### meta.isTouched\n\n> boolean\n\nReturns the current global touched state between all rendered inputs.\n\n#### meta.erroredInputs\n\n> Object\n\nReturns the error message of each rendered input.\n\n##### Example snippet\n\n```jsx\nconst { meta } = usePaymentInputs();\n\nconsole.log(meta.erroredInputs);\n/*\n{\n cardNumber: undefined,\n expiryDate: 'Enter an expiry date',\n cvc: 'Enter a CVC'\n}\n*/\n```\n\n#### meta.touchedInputs\n\n> Object\n\nReturns the touch state of each rendered input.\n\n##### Example snippet\n\n```jsx\nconst { meta } = usePaymentInputs();\n\nconsole.log(meta.touchedInputs);\n/*\n{\n cardNumber: true,\n expiryDate: true,\n cvc: false\n}\n*/\n```\n\n#### meta.focused\n\n> string\n\nReturns the current focused input.\n\n```jsx\nconst { meta } = usePaymentInputs();\n\nconsole.log(meta.focused); // \"cardNumber\"\n```\n\n#### wrapperProps\n\n> Object\n\nReturns the props to apply to `\u003cPaymentInputsWrapper>`.\n\n`\u003cPaymentInputsWrapper>` props\n------------------------------\n\n### styles\n\n> Object\n\nCustom styling to pass through to the wrapper. Either a styled-component's `css` or an Object can be passed.\n\n#### Schema\n\n```\n{\n fieldWrapper: {\n base: css | Object,\n errored: css | Object\n },\n inputWrapper: {\n base: css | Object,\n errored: css | Object,\n focused: css | Object\n },\n input: {\n base: css | Object,\n errored: css | Object,\n cardNumber: css | Object,\n expiryDate: css | Object,\n cvc: css | Object\n },\n errorText: {\n base: css | Object\n }\n}\n```\n\n### errorTextProps\n\n> Object\n\nCustom props to pass to the error text component.\n\n### inputWrapperProps\n\n> Object\n\nCustom props to pass to the input wrapper component.\n\nUsing a third-party UI library\n------------------------------\n\nReact Payment Inputs allows you to integrate into pretty much any React UI library. Below are a couple of examples of how you can fit React Payment Inputs into a UI library using `usePaymentInputs`. You can also do the same with `\u003cPaymentInputsContainer>`.\n\n### Fannypack\n\n![fannypack](qJ3pLTUIjgQa4ymx5gu-6-4aN7c=/800x0/fannypack_ee39fa6500.gif)\n\n```jsx\nimport React from 'react';\nimport { FieldSet, InputField } from 'fannypack';\nimport { usePaymentInputs } from 'react-payment-inputs';\nimport images from 'react-payment-inputs/images';\n\nexport default function PaymentInputs() {\n const {\n meta,\n getCardNumberProps,\n getExpiryDateProps,\n getCVCProps\n } = usePaymentInputs();\n const { erroredInputs, touchedInputs } = meta;\n\n return (\n \u003cFieldSet isHorizontal>\n \u003cInputField\n // Here is where React Payment Inputs injects itself into the input element.\n {...getCardNumberProps()}\n placeholder=\"0000 0000 0000 0000\"\n label=\"Card number\"\n inputRef={getCardNumberProps().ref}\n // You can retrieve error state by making use of the error & touched attributes in `meta`.\n state={erroredInputs.cardNumber && touchedInputs.cardNumber ? 'danger' : undefined}\n validationText={touchedInputs.cardNumber && erroredInputs.cardNumber}\n maxWidth=\"15rem\"\n />\n \u003cInputField\n {...getExpiryDateProps()}\n label=\"Expiry date\"\n inputRef={getExpiryDateProps().ref}\n state={erroredInputs.expiryDate && touchedInputs.expiryDate ? 'danger' : undefined}\n validationText={touchedInputs.expiryDate && erroredInputs.expiryDate}\n maxWidth=\"8rem\"\n />\n \u003cInputField\n {...getCVCProps()}\n placeholder=\"123\"\n label=\"CVC\"\n inputRef={getCVCProps().ref}\n state={erroredInputs.cvc && touchedInputs.cvc ? 'danger' : undefined}\n validationText={touchedInputs.cvc && erroredInputs.cvc}\n maxWidth=\"5rem\"\n />\n \u003c/FieldSet>\n );\n}\n```\n\n### Bootstrap\n\n![bootstrap](AqVz8Kc3MNq7G2TpLkdYViBcbWM=/800x0/bootstrap_b76716e793.gif)\n\n```jsx\nimport React from 'react';\nimport { FieldSet, InputField } from 'fannypack';\nimport { usePaymentInputs } from 'react-payment-inputs';\nimport images from 'react-payment-inputs/images';\n\nexport default function PaymentInputs() {\n const {\n meta,\n getCardNumberProps,\n getExpiryDateProps,\n getCVCProps\n } = usePaymentInputs();\n const { erroredInputs, touchedInputs } = meta;\n\n return (\n \u003cForm>\n \u003cForm.Row>\n \u003cForm.Group as={Col} style={{ maxWidth: '15rem' }}>\n \u003cForm.Label>Card number\u003c/Form.Label>\n \u003cForm.Control\n // Here is where React Payment Inputs injects itself into the input element.\n {...getCardNumberProps()}\n // You can retrieve error state by making use of the error & touched attributes in `meta`.\n isInvalid={touchedInputs.cardNumber && erroredInputs.cardNumber}\n placeholder=\"0000 0000 0000 0000\"\n />\n \u003cForm.Control.Feedback type=\"invalid\">{erroredInputs.cardNumber}\u003c/Form.Control.Feedback>\n \u003c/Form.Group>\n \u003cForm.Group as={Col} style={{ maxWidth: '10rem' }}>\n \u003cForm.Label>Expiry date\u003c/Form.Label>\n \u003cForm.Control\n {...getExpiryDateProps()}\n isInvalid={touchedInputs.expiryDate && erroredInputs.expiryDate}\n />\n \u003cForm.Control.Feedback type=\"invalid\">{erroredInputs.expiryDate}\u003c/Form.Control.Feedback>\n \u003c/Form.Group>\n \u003cForm.Group as={Col} style={{ maxWidth: '7rem' }}>\n \u003cForm.Label>CVC\u003c/Form.Label>\n \u003cForm.Control\n {...getCVCProps()}\n isInvalid={touchedInputs.cvc && erroredInputs.cvc}\n placeholder=\"123\"\n />\n \u003cForm.Control.Feedback type=\"invalid\">{erroredInputs.cvc}\u003c/Form.Control.Feedback>\n \u003c/Form.Group>\n \u003c/Form.Row>\n \u003c/Form>\n );\n}\n```\n\nForm library examples\n---------------------\n\nReact Payment Inputs has support for any type of React form library. Below are examples using [Formik](https://jaredpalmer.com/formik/) & [React Final Form](https://github.com/final-form/react-final-form).\n\n### Formik\n\n```jsx\nimport { Formik, Field } from 'formik';\nimport { PaymentInputsWrapper, usePaymentInputs } from 'react-payment-inputs';\n\nfunction PaymentForm() {\n const {\n meta,\n getCardImageProps,\n getCardNumberProps,\n getExpiryDateProps,\n getCVCProps,\n wrapperProps\n } = usePaymentInputs();\n\n return (\n \u003cFormik\n initialValues={{\n cardNumber: '',\n expiryDate: '',\n cvc: ''\n }}\n onSubmit={data => console.log(data)}\n validate={() => {\n let errors = {};\n if (meta.erroredInputs.cardNumber) {\n errors.cardNumber = meta.erroredInputs.cardNumber;\n }\n if (meta.erroredInputs.expiryDate) {\n errors.expiryDate = meta.erroredInputs.expiryDate;\n }\n if (meta.erroredInputs.cvc) {\n errors.cvc = meta.erroredInputs.cvc;\n }\n return errors;\n }}\n >\n {({ handleSubmit }) => (\n \u003cform onSubmit={handleSubmit}>\n \u003cdiv>\n \u003cPaymentInputsWrapper {...wrapperProps}>\n \u003csvg {...getCardImageProps({ images })} />\n \u003cField name=\"cardNumber\">\n {({ field }) => (\n \u003cinput {...getCardNumberProps({ onBlur: field.onBlur, onChange: field.onChange })} />\n )}\n \u003c/Field>\n \u003cField name=\"expiryDate\">\n {({ field }) => (\n \u003cinput {...getExpiryDateProps({ onBlur: field.onBlur, onChange: field.onChange })} />\n )}\n \u003c/Field>\n \u003cField name=\"cvc\">\n {({ field }) => \u003cinput {...getCVCProps({ onBlur: field.onBlur, onChange: field.onChange })} />}\n \u003c/Field>\n \u003c/PaymentInputsWrapper>\n \u003c/div>\n \u003cButton marginTop=\"major-2\" type=\"submit\">\n Submit\n \u003c/Button>\n \u003c/form>\n )}\n \u003c/Formik>\n );\n}\n```\n\n[See this example in Storybook](https://medipass.github.io/react-payment-inputs/?path=/story/usepaymentinputs--using-a-form-library-formik)\n\n### React Final Form\n\n```jsx\nimport { Form, Field } from 'react-final-form';\nimport { PaymentInputsWrapper, usePaymentInputs } from 'react-payment-inputs';\n\nfunction PaymentForm() {\n const {\n meta,\n getCardImageProps,\n getCardNumberProps,\n getExpiryDateProps,\n getCVCProps,\n wrapperProps\n } = usePaymentInputs();\n\n return (\n \u003cForm\n onSubmit={data => console.log(data)}\n validate={() => {\n let errors = {};\n if (meta.erroredInputs.cardNumber) {\n errors.cardNumber = meta.erroredInputs.cardNumber;\n }\n if (meta.erroredInputs.expiryDate) {\n errors.expiryDate = meta.erroredInputs.expiryDate;\n }\n if (meta.erroredInputs.cvc) {\n errors.cvc = meta.erroredInputs.cvc;\n }\n return errors;\n }}\n >\n {({ handleSubmit }) => (\n \u003cform onSubmit={handleSubmit}>\n \u003cdiv>\n \u003cPaymentInputsWrapper {...wrapperProps}>\n \u003csvg {...getCardImageProps({ images })} />\n \u003cField name=\"cardNumber\">\n {({ input }) => (\n \u003cinput {...getCardNumberProps({ onBlur: input.onBlur, onChange: input.onChange })} />\n )}\n \u003c/Field>\n \u003cField name=\"expiryDate\">\n {({ input }) => (\n \u003cinput {...getExpiryDateProps({ onBlur: input.onBlur, onChange: input.onChange })} />\n )}\n \u003c/Field>\n \u003cField name=\"cvc\">\n {({ input }) => \u003cinput {...getCVCProps({ onBlur: input.onBlur, onChange: input.onChange })} />}\n \u003c/Field>\n \u003c/PaymentInputsWrapper>\n \u003c/div>\n \u003cButton marginTop=\"major-2\" type=\"submit\">\n Submit\n \u003c/Button>\n \u003c/form>\n )}\n \u003c/Form>\n );\n}\n```\n\n[See this example in Storybook](https://medipass.github.io/react-payment-inputs/?path=/story/usepaymentinputs--using-a-form-library-react-final-form)\n\nCustomising the in-built style wrapper\n--------------------------------------\n\nReact Payment Input's default style wrapper can be customized by supplying a `styles` prop.\n\n```jsx\nimport { css } from 'styled-components';\nimport { usePaymentInputs, PaymentInputsWrapper } from 'react-payment-inputs';\n\nfunction PaymentForm() {\n const {\n getCardNumberProps,\n getExpiryDateProps,\n getCVCProps,\n wrapperProps\n } = usePaymentInputs();\n\n return (\n \u003cPaymentInputsWrapper\n {...wrapperProps}\n styles={{\n fieldWrapper: {\n base: css`\n margin-bottom: 1rem;\n `\n },\n inputWrapper: {\n base: css`\n border-color: green;\n `,\n errored: css`\n border-color: maroon;\n `,\n focused: css`\n border-color: unset;\n box-shadow: unset;\n outline: 2px solid blue;\n outline-offset: 2px;\n `\n },\n input: {\n base: css`\n color: green;\n `,\n errored: css`\n color: maroon;\n `,\n cardNumber: css`\n width: 15rem;\n `,\n expiryDate: css`\n width: 10rem;\n `,\n cvc: css`\n width: 5rem;\n `\n },\n errorText: {\n base: css`\n color: maroon;\n `\n }\n }}\n >\n \u003cinput {...getCardNumberProps()} />\n \u003cinput {...getExpiryDateProps()} />\n \u003cinput {...getCVCProps()} />\n \u003c/PaymentInputsWrapper>\n );\n}\n```\n\n[See the example on Storybook](https://medipass.github.io/react-payment-inputs/?path=/story/usepaymentinputs--styled-wrapper-with-custom-styling)\n\nCustom card images\n------------------\n\nThe card images can be customized by passing the `images` attribute to `getCardImageProps({ images })`. The `images` object must consist of SVG paths.\n\n```jsx\nimport { css } from 'styled-components';\nimport { usePaymentInputs, PaymentInputsWrapper } from 'react-payment-inputs';\n\nconst images = {\n mastercard: (\n \u003cg fill=\"none\" fillRule=\"evenodd\">\n \u003crect fill=\"#252525\" height=\"16\" rx=\"2\" width=\"24\" />\n \u003ccircle cx=\"9\" cy=\"8\" fill=\"#eb001b\" r=\"5\" />\n \u003ccircle cx=\"15\" cy=\"8\" fill=\"#f79e1b\" r=\"5\" />\n \u003cpath\n d=\"m12 3.99963381c1.2144467.91220633 2 2.36454836 2 4.00036619s-.7855533 3.0881599-2 4.0003662c-1.2144467-.9122063-2-2.36454837-2-4.0003662s.7855533-3.08815986 2-4.00036619z\"\n fill=\"#ff5f00\"\n />\n \u003c/g>\n )\n}\n\nfunction PaymentForm() {\n const {\n getCardNumberProps,\n getExpiryDateProps,\n getCVCProps,\n getCardImageProps,\n wrapperProps\n } = usePaymentInputs();\n\n return (\n \u003cPaymentInputsWrapper {...wrapperProps}>\n \u003csvg {...getCardImageProps({ images })} />\n \u003cinput {...getCardNumberProps()} />\n \u003cinput {...getExpiryDateProps()} />\n \u003cinput {...getCVCProps()} />\n \u003c/PaymentInputsWrapper>\n );\n}\n```\n\nGitHub\n------","PublishedAt":"2019-08-29T03:49:01.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:7698":{"id":"7698","__typename":"UploadFile","formats":{"200":"lWca8eP1TR9WxVSA4S7Anfd9rfo=/200x0/otp_input_react_1_f169ce9467.gif","400":"m3sFn3t10RrB4b8TY6SjtQXx3AA=/400x0/otp_input_react_1_f169ce9467.gif","600":"wAlvg7bxF5JjakyrSrTSCW7CPgQ=/600x0/otp_input_react_1_f169ce9467.gif","800":"fG33UEOD077C9Xn7AKX4I7RC-Cs=/800x0/otp_input_react_1_f169ce9467.gif","1200":"x16mLpUOiFmKnhDpS88yOToGnrg=/1200x0/otp_input_react_1_f169ce9467.gif","1600":"7edCzfen7-FPTa5vcn_5o28IonU=/1600x0/otp_input_react_1_f169ce9467.gif","2000":"w7ABbHoeOyTQ97Z8mRsmZEg_hdc=/2000x0/otp_input_react_1_f169ce9467.gif","default":"fG33UEOD077C9Xn7AKX4I7RC-Cs=/800x0/otp_input_react_1_f169ce9467.gif","general":"fG33UEOD077C9Xn7AKX4I7RC-Cs=/800x0/otp_input_react_1_f169ce9467.gif","blur_400":"SaWwRsArGURNU1u3KgCF3horP80=/400x0/filters:blur(8)/otp_input_react_1_f169ce9467.gif","blur_600":"Mhjj1HvwmTgw-H01yeXGw4mZ590=/600x0/filters:blur(8)/otp_input_react_1_f169ce9467.gif","blur_800":"06YuUi6MDKNa4BoprlZO7nagZb4=/800x0/filters:blur(8)/otp_input_react_1_f169ce9467.gif","blur_1200":"UWFdo8rQqb2irJ10djP0esQ4q_4=/1200x0/filters:blur(8)/otp_input_react_1_f169ce9467.gif","blur_1600":"zMu8viPbai3pOMUHWkWVIe4B56I=/1600x0/filters:blur(8)/otp_input_react_1_f169ce9467.gif","mediaViewer":"x16mLpUOiFmKnhDpS88yOToGnrg=/1200x0/otp_input_react_1_f169ce9467.gif","thumbnail":"m3sFn3t10RrB4b8TY6SjtQXx3AA=/400x0/otp_input_react_1_f169ce9467.gif"},"width":340,"height":480},"UploadFile:7699":{"id":"7699","__typename":"UploadFile","formats":{"200":"n1bSZvfWLlqgnZ5syRixqGoSqr8=/200x0/otp_input_react_b9c95a4113.gif","400":"NPk7WFPUKmVA_UJIQbu27UWzaU8=/400x0/otp_input_react_b9c95a4113.gif","600":"guAQ3RvdnznkApy09ekAUgsGtCc=/600x0/otp_input_react_b9c95a4113.gif","800":"a9PM914xP7hrjiok3WD96SmqW2A=/800x0/otp_input_react_b9c95a4113.gif","1200":"_17smBK42htYdI0gkHJllcJp8pg=/1200x0/otp_input_react_b9c95a4113.gif","1600":"mKrkxMq_lfrhKA32wrHRwA-ztWo=/1600x0/otp_input_react_b9c95a4113.gif","2000":"eyGmdvNJPSzTiG0lTzuLo9acaLs=/2000x0/otp_input_react_b9c95a4113.gif","default":"a9PM914xP7hrjiok3WD96SmqW2A=/800x0/otp_input_react_b9c95a4113.gif","general":"a9PM914xP7hrjiok3WD96SmqW2A=/800x0/otp_input_react_b9c95a4113.gif","blur_400":"zx6spO0x2S7L-JJlGz1CDIZxvQQ=/400x0/filters:blur(8)/otp_input_react_b9c95a4113.gif","blur_600":"U7YplrOkkygNDgrjovWNgq657Wc=/600x0/filters:blur(8)/otp_input_react_b9c95a4113.gif","blur_800":"PvTpzh_SWD_NOR36vMTbpVYsdqg=/800x0/filters:blur(8)/otp_input_react_b9c95a4113.gif","blur_1200":"AZDlJIyRUSLyWtK8nYvMZ2jRyVI=/1200x0/filters:blur(8)/otp_input_react_b9c95a4113.gif","blur_1600":"Y6DhnS4CU9u8y7baWU_JKaP5wWE=/1600x0/filters:blur(8)/otp_input_react_b9c95a4113.gif","mediaViewer":"_17smBK42htYdI0gkHJllcJp8pg=/1200x0/otp_input_react_b9c95a4113.gif","thumbnail":"NPk7WFPUKmVA_UJIQbu27UWzaU8=/400x0/otp_input_react_b9c95a4113.gif"},"width":340,"height":480},"ContentsElastic:265785":{"id":"265785","__typename":"ContentsElastic","Title":"React simple otp input with react hooks","Slug":"react-simple-otp-input-with-react-hooks","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7698"}},{"__typename":"ComponentMediaMediaItems","Purpose":"post-image","URL":null,"File":{"__ref":"UploadFile:7699"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/react-simple-otp-input-with-react-hooks/","Description":"A fully customizable, one-time password input with resend OTP component for the web built with React functional component.","Body":"otp-input-react\n---------------\n\nA fully customizable, one-time password input with resend OTP component for the web built with React functional component.\n\n![otp-input-react](a9PM914xP7hrjiok3WD96SmqW2A=/800x0/otp_input_react_b9c95a4113.gif)\n\n[View Demo](https://shubhanus.github.io/otp-input-react/) [View Github](https://github.com/shubhanus/otp-input-react)\n\nInstallation\n------------\n\n```\nnpm install --save otp-input-react\n```\n\nUsage:\n------\n\n```javascript\nimport OTPInput, { ResendOTP } from \"otp-input-react\";\n\nfunction App() {\n const [OTP, setOTP] = useState(\"\");\n return (\n \u003cOTPInput\n value={OTP}\n onChange={setOTP}\n autoFocus\n OTPLength={4}\n otpType=\"number\"\n disabled={false}\n secure\n />\n \u003cResendOTP handelResendClick={() => console.log(\"Resend clicked\")} />\n );\n}\n```\n\nAPI\n---\n\n### OTP input\n\n| Name | Type | Required | Default | Description | Status |\n| --- | --- | --- | --- | --- | --- |\n| OTPLength | Number | false | 4 | Number of input boxes. | Working |\n| onChange | Function | **true** | \\- | Returns OTP code typed in inputs. | Working |\n| value | String / Number | **true** | '' | The value of the otp passed into the component. | Working |\n| disabled | Boolean | false | false | Disables all the inputs. | Working |\n| autoFocus | Boolean | false | false | Auto focuses input on initial page load. | Working |\n| otpType | Enum: `any`\\|`number`\\|`alpha`\\|`alphanumeric` | false | any | `any` - allows any value. `number` - allow only numbers. `alpha` - allows only `a-zA-Z`. `alphanumeric` - allows `0-9a-zA-z` | Working |\n| secure | Boolean | false | false | Change input type to password. | Working |\n| inputClassName | String | \\- | \\- | Class for root element. | Working |\n| className | String | \\- | \\- | Class for root element. | Working |\n| inputStyles | Object | \\- | \\- | Styles for input element. | Working |\n| style | Object | \\- | \\- | Styles for root element. | Working |\n\n### Resend OTP\n\n| Name | Type | Required | Default | Description | Status |\n| --- | --- | --- | --- | --- | --- |\n| maxTime | Number | false | 60 | Timer that user has to wait before resend otp gets active. | Working |\n| onResendClick | Function | **true** | \\- | Function get triggers when user click on resend otp button. But when button is disabled(i.e. time is not completed) it won't get trigger | Working |\n| onTimerComplete | Function | false | \\- | An optional callback when timer completes. | Working |\n| timeInterval | Number | false | 1000 | You can change time interval. | Working |\n| renderTime | Function - render props | false | \\- | You can use your own component for seconds. Function will get remainingTime as props you can use it to show timer. | Working |\n| renderButton | Function - render props | false | \\- | You can use your own component for resend button. Function will get `disabled` and `onClick` function and `remainingTime` as props you can pass it to your component. | Working |\n| style | Object | false | \\- | For changing root component inline styles | Working |\n| className | string | false | \\- | For adding class to root component. | Working |\n\nCustom timer and button component\n---------------------------------\n\n```javascript\nconst renderButton = buttonProps => {\n return \u003cbutton {...buttonProps}>Resend\u003c/button>;\n};\nconst renderTime = remainingTime => {\n return \u003cspan>{remainingTime} seconds remaining\u003c/span>;\n};\n\u003cResendOTP renderButton={renderButton} renderTime={renderTime} />;\n```\n\nHide timer and show sec in button component\n-------------------------------------------\n\n```javascript\nconst renderButton = buttonProps => {\n return (\n \u003cbutton {...buttonProps}>\n {buttonProps.remainingTime !== 0\n ? `Please wait for ${buttonProps.remainingTime} sec`\n : \"Resend\"}\n \u003c/button>\n );\n};\nconst renderTime = () => React.Fragment;\n\u003cResendOTP renderButton={renderButton} renderTime={renderTime} />;\n```\n\n### TODO\n\n* \\[x\\] Add other type input\n* \\[ \\] Change scaffolding\n* \\[ \\] Add CI\n* \\[x\\] Add OTP Timer with resend otp optional type\n* \\[ \\] Add Complete callback for otp\n\nGitHub\n------","PublishedAt":"2019-08-25T06:16:46.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:7932":{"id":"7932","__typename":"UploadFile","formats":{"200":"C6xKQd-Ux3fWs_IEZ2f7r9uDHdY=/200x0/bs_custom_file_input_1d5bc54fff.jpg","400":"NAMZX9l0krNCfmw-Z1a_GMWLbjk=/400x0/bs_custom_file_input_1d5bc54fff.jpg","600":"v0J-c_Yip9lYgwI0K1EzFdhTQlU=/600x0/bs_custom_file_input_1d5bc54fff.jpg","800":"Yoz3id2F_zXNkzftoThBSbkkZjY=/800x0/bs_custom_file_input_1d5bc54fff.jpg","1200":"INshK1pF0he1UNYD-mOSZcVubJE=/1200x0/bs_custom_file_input_1d5bc54fff.jpg","1600":"DmWRaTzj_DWmcxP_p5g-RKkAmLE=/1600x0/bs_custom_file_input_1d5bc54fff.jpg","2000":"VkynTSEKBSczpo4LyDUvidbOc4k=/2000x0/bs_custom_file_input_1d5bc54fff.jpg","default":"Yoz3id2F_zXNkzftoThBSbkkZjY=/800x0/bs_custom_file_input_1d5bc54fff.jpg","general":"Yoz3id2F_zXNkzftoThBSbkkZjY=/800x0/bs_custom_file_input_1d5bc54fff.jpg","blur_400":"Q2Ra8SJKUp1Yo3fw4t3HiO8lfP8=/400x0/filters:blur(8)/bs_custom_file_input_1d5bc54fff.jpg","blur_600":"oS5ftyTuMpT5qpl6VXf-NS1D3pw=/600x0/filters:blur(8)/bs_custom_file_input_1d5bc54fff.jpg","blur_800":"MiD754kwKYGwKHxfjO_0tDx2MGo=/800x0/filters:blur(8)/bs_custom_file_input_1d5bc54fff.jpg","blur_1200":"fzKOxJDhrys-II-H4F69y9niD5s=/1200x0/filters:blur(8)/bs_custom_file_input_1d5bc54fff.jpg","blur_1600":"7qyF0OGN68U8bW4RIZfvSEQM1pU=/1600x0/filters:blur(8)/bs_custom_file_input_1d5bc54fff.jpg","mediaViewer":"INshK1pF0he1UNYD-mOSZcVubJE=/1200x0/bs_custom_file_input_1d5bc54fff.jpg","thumbnail":"NAMZX9l0krNCfmw-Z1a_GMWLbjk=/400x0/bs_custom_file_input_1d5bc54fff.jpg"},"width":815,"height":577},"ContentsElastic:265941":{"id":"265941","__typename":"ContentsElastic","Title":"A little plugin for Bootstrap 4 custom file input","Slug":"a-little-plugin-for-bootstrap-4-custom-file-input","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7932"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/a-little-plugin-for-bootstrap-4-custom-file-input/","Description":"A little plugin which makes Bootstrap 4 custom file input dynamic with no dependencies.","Body":"bs-custom-file-input\n--------------------\n\nA little plugin which makes Bootstrap 4 custom file input dynamic with no dependencies.\n\n[View Demo](https://bs-custom-file-input.netlify.com/) [Download Source](https://github.com/Johann-S/bs-custom-file-input/archive/master.zip)\n\nFeatures:\n\n* Works with Bootstrap 4\n* Works without _dependencies_ and jQuery\n* Display file name\n* Display file names for `multiple` input\n* Reset your custom file input to its initial state\n* Handle form reset\n* Allow custom selectors for input, and form\n* Allow to drag and drop files\n* Allow you to change the default display with a child in the `\u003clabel>` element\n* Built in UMD to be used everywhere\n* Small, only **2kb** and less if you gzip it\n\nInstall\n-------\n\n### With npm\n\n```sh\nnpm install bs-custom-file-input --save\n```\n\n### CDN\n\n| CDN | Link |\n| --- | --- |\n| jsDelivr | [`https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js`](https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js) |\n| jsDelivr, minified | [`https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js`](https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js) |\n\nHow to use it\n-------------\n\nYou should wait for the document ready event and call the `init` method to make your custom file input dynamic. \nWe expose one global variable available everywhere: `bsCustomFileInput`\n\n```js\n$(document).ready(function () {\n bsCustomFileInput.init()\n})\n```\n\n### Use it with npm\n\n```js\nimport bsCustomFileInput from 'bs-custom-file-input'\n```\n\nFor more examples check out [this file](https://github.com/Johann-S/bs-custom-file-input/blob/master/tests/index.html).\n\nThis library is UMD ready so you can use it everywhere.\n\nMethods\n-------\n\n### init\n\nFinds your Bootstrap custom file input and will make them dynamic.\n\n#### Parameters\n\n* `inputSelector`\n \n * default value: `.custom-file input[type=\"file\"]`\n * type: `string`\n \n You can pass a custom input selector, but be sure to pass a **file input selector**\n \n* `formSelector`\n \n * default value: `form`\n * type: `string`\n \n Allows you to pass a custom form selector, but be sure to pass a **form selector**\n \n\n### destroy\n\nRemoves this plugin from your Bootstrap custom file input and restore them at their first initial state\n\nGitHub\n------","PublishedAt":"2019-03-27T14:11:23.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:7999":{"id":"7999","__typename":"UploadFile","formats":{"200":"MVm7JGzE0Q3kmVGlPWlKRiAuYk4=/200x0/inputfields_9ccbebb3f7.gif","400":"mBO8IZdi4WyHoRaVlVh9PQyouSg=/400x0/inputfields_9ccbebb3f7.gif","600":"toJbXqedbgzlw9jkCaPJZ-1NG4U=/600x0/inputfields_9ccbebb3f7.gif","800":"bUGCrpZ8K7JG46VdUfGc6awqXkA=/800x0/inputfields_9ccbebb3f7.gif","1200":"IBNttqMb17UXIl3g2eVJQVTAGIA=/1200x0/inputfields_9ccbebb3f7.gif","1600":"sbSo7ai8o5DweUdjxwUKCRndcUQ=/1600x0/inputfields_9ccbebb3f7.gif","2000":"aM-PnRAhdsA6c90H8k74HjFpt4I=/2000x0/inputfields_9ccbebb3f7.gif","default":"bUGCrpZ8K7JG46VdUfGc6awqXkA=/800x0/inputfields_9ccbebb3f7.gif","general":"bUGCrpZ8K7JG46VdUfGc6awqXkA=/800x0/inputfields_9ccbebb3f7.gif","blur_400":"NkeMzpZezVRl5eTbzADfY8LtPOM=/400x0/filters:blur(8)/inputfields_9ccbebb3f7.gif","blur_600":"4z71jCcsFPS1XXRYqBg1CR5MB9Q=/600x0/filters:blur(8)/inputfields_9ccbebb3f7.gif","blur_800":"jtOqdmPCrG2SXhOFgxjymZm8A3I=/800x0/filters:blur(8)/inputfields_9ccbebb3f7.gif","blur_1200":"azhQQAkpUTo7CHj8NxB5eH5TnF0=/1200x0/filters:blur(8)/inputfields_9ccbebb3f7.gif","blur_1600":"kgg0mCFeb2QNS87a-lulExIz5dE=/1600x0/filters:blur(8)/inputfields_9ccbebb3f7.gif","mediaViewer":"IBNttqMb17UXIl3g2eVJQVTAGIA=/1200x0/inputfields_9ccbebb3f7.gif","thumbnail":"mBO8IZdi4WyHoRaVlVh9PQyouSg=/400x0/inputfields_9ccbebb3f7.gif"},"width":783,"height":508},"UploadFile:8000":{"id":"8000","__typename":"UploadFile","formats":{"200":"dCBKLfHK-HFqRG2_GDJ_RJqC9bg=/200x0/react_translatable_input_756a807ade.png","400":"FyE3tLkEkxSwXR9hIQMI2I0Bg1k=/400x0/react_translatable_input_756a807ade.png","600":"yADophQK_HIUcBK9huybivlS_-8=/600x0/react_translatable_input_756a807ade.png","800":"URTofQqZe15px7EBU7XMXloa1ik=/800x0/react_translatable_input_756a807ade.png","1200":"kPc_8RR6Ckt1sNZR8fxxhxQD2UY=/1200x0/react_translatable_input_756a807ade.png","1600":"zXq3fAffl4IIfjOKgXKTPUiTHqM=/1600x0/react_translatable_input_756a807ade.png","2000":"3sazhYsu6PfHOIEB5kI_f5IDtcs=/2000x0/react_translatable_input_756a807ade.png","default":"URTofQqZe15px7EBU7XMXloa1ik=/800x0/react_translatable_input_756a807ade.png","general":"URTofQqZe15px7EBU7XMXloa1ik=/800x0/react_translatable_input_756a807ade.png","blur_400":"QbmZEWnis-OoYmcji3mWZiil7Mw=/400x0/filters:blur(8)/react_translatable_input_756a807ade.png","blur_600":"C3-VSsGnF8ySPyQQ2wU3k-FqtOE=/600x0/filters:blur(8)/react_translatable_input_756a807ade.png","blur_800":"8kHEOxG2wIfysXGa0mNhZOLCO3g=/800x0/filters:blur(8)/react_translatable_input_756a807ade.png","blur_1200":"4Km27kugbiNww7-GuCrdNDK1t-w=/1200x0/filters:blur(8)/react_translatable_input_756a807ade.png","blur_1600":"FF5nRIS4f9q1v5dJKOU_7epmBKA=/1600x0/filters:blur(8)/react_translatable_input_756a807ade.png","mediaViewer":"kPc_8RR6Ckt1sNZR8fxxhxQD2UY=/1200x0/react_translatable_input_756a807ade.png","thumbnail":"FyE3tLkEkxSwXR9hIQMI2I0Bg1k=/400x0/react_translatable_input_756a807ade.png"},"width":1790,"height":854},"ContentsElastic:265983":{"id":"265983","__typename":"ContentsElastic","Title":"A ReactJS input component that manages multiple languages","Slug":"a-reactjs-input-component-that-manages-multiple-languages","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:7999"}},{"__typename":"ComponentMediaMediaItems","Purpose":"post-image","URL":null,"File":{"__ref":"UploadFile:8000"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/a-reactjs-input-component-that-manages-multiple-languages/","Description":"A ReactJS input component that manages multiple languages.","Body":"React-translatable-input\n------------------------\n\nA ReactJS input component that manages multiple languages.\n\n[View demo](http://code.belka.us/react-translatable-input/) [Download Source](https://github.com/BelkaLab/react-translatable-input/archive/master.zip)\n\n```bash\n$ npm install --save react-translatable-input\n```\n\n![react-translatable-input](URTofQqZe15px7EBU7XMXloa1ik=/800x0/react_translatable_input_756a807ade.png)\n\nOptions\n-------\n\n| Prop | Type | Description | Default |\n| --- | --- | --- | --- |\n| **lang** | React.PropTypes.string.isRequired | The current editing language | \\- |\n| **values** | React.PropTypes.object.isRequired | The object containing the translated strings | \\- |\n| textarea | React.PropTypes.bool | Use a textarea for a multi-line input? | false |\n| placeholder | React.PropTypes.string | The placeholder to show when the input field is empty | \\- |\n| classes | React.PropTypes.string | Additional HTML classes to pass to the component | \\- |\n| disabled | React.PropTypes.bool | Is the component disabled? | false |\n| showLanguageName | React.PropTypes.bool | Show the language name label next to the flag? | false |\n| langTranslator | React.PropTypes.func | Used to translate iso langage codes to language names when `showLanguageName` is true | \\- |\n\n#### The `values` object\n\nThe most important prop to be passed is the `values` object, which must be a plain JS Object in the form `{ langTag: langValue }`. For example:\n\n```js\nvalues = {\n 'it': 'Italian input',\n 'en-US': 'English (United States) input',\n 'en': 'English input',\n 'de': 'German input'\n};\n```\n\nAll the language tags must be [_BCP 47_](https://www.w3.org/International/articles/language-tags/index.en) compliant. Differently encoded language names will be filtered out and not shown in the component. \nThe only exception to this rule is the `default` language, intended to be used as a general fallback language. If the `default` language is present, it will always be put on top of the available languages.\n\nCallbacks\n---------\n\n| Prop | Type | Syntax | Description |\n| --- | --- | --- | --- |\n| onLanguageChange | React.PropTypes.func | function(selectedLanguage) {} | Callback on language selection |\n| onValueChange | React.PropTypes.func | function(newValue, editingLanguage) {} | Callback on text entered |\n| onKeyDown | React.PropTypes.func | function(event) {} | Callback on keydown when text input is focused |\n\nBuild it yourself\n-----------------\n\nClone and run\n\n```bash\n$ npm install\n```\n\nGitHub\n------","PublishedAt":"2019-02-28T03:46:37.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:8034":{"id":"8034","__typename":"UploadFile","formats":{"200":"2__Tfhx652K8AelJxJX9KS5SrzI=/200x0/editable_a23edf73ab.gif","400":"pD2n_lZaQtWlLnXHqxzjJPd4IbA=/400x0/editable_a23edf73ab.gif","600":"KYANqn2vUK-5hhNRCsSmhkdUbaY=/600x0/editable_a23edf73ab.gif","800":"-lbVnZsw-R1KCtLl4od0ex03lEA=/800x0/editable_a23edf73ab.gif","1200":"5BuCTcsqXbYQ51vQCwz7YpX2j0k=/1200x0/editable_a23edf73ab.gif","1600":"N8LyvpIJKVOKHY2lCggN6uYvgA4=/1600x0/editable_a23edf73ab.gif","2000":"AFHoviglsNgaRcfH-CFnv9yZFqM=/2000x0/editable_a23edf73ab.gif","default":"-lbVnZsw-R1KCtLl4od0ex03lEA=/800x0/editable_a23edf73ab.gif","general":"-lbVnZsw-R1KCtLl4od0ex03lEA=/800x0/editable_a23edf73ab.gif","blur_400":"zpKmQmTWYXNMFoYbxEQM9dXNonI=/400x0/filters:blur(8)/editable_a23edf73ab.gif","blur_600":"Hm2nQo31AeAEACBfgYbi1tETLd4=/600x0/filters:blur(8)/editable_a23edf73ab.gif","blur_800":"yDB1p_b1dbc_f3ADUnms5f3nS70=/800x0/filters:blur(8)/editable_a23edf73ab.gif","blur_1200":"W9vBtNEGU17a7-LIGPn62z8RHrw=/1200x0/filters:blur(8)/editable_a23edf73ab.gif","blur_1600":"TJh6wKS97PH9Or73kpTRp2oW2Uk=/1600x0/filters:blur(8)/editable_a23edf73ab.gif","mediaViewer":"5BuCTcsqXbYQ51vQCwz7YpX2j0k=/1200x0/editable_a23edf73ab.gif","thumbnail":"pD2n_lZaQtWlLnXHqxzjJPd4IbA=/400x0/editable_a23edf73ab.gif"},"width":659,"height":361},"ContentsElastic:266006":{"id":"266006","__typename":"ContentsElastic","Title":"An editable title implementation for react","Slug":"an-editable-title-implementation-for-react","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:8034"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/an-editable-title-implementation-for-react/","Description":"An editable title implementation for react.","Body":"react-editable-title\n--------------------\n\nAn editable title implementation for react.\n\n[View Demo](https://codesandbox.io/s/7w063kppz6) [Download Source](https://github.com/CeamKrier/react-editable-title/archive/master.zip)\n\nInstallation\n------------\n\n```\nnpm install react-editable-title\n```\n\nUsage\n-----\n\n```javascript\nimport Editable from 'react-editable-title'\n\nhandleNewTitle (data) {\n console.log('Your new title is ' + data)\n }\n\n\u003cEditable contentRefs={this.handleNewTitle} name='This is a test text'/>\n\n```\n\nFeatures\n--------\n\nYou can enable/disable both edit button and control buttons of component.\n\n```javascript\n\u003cEditable contentRefs={this.handleNewTitle} name='All buttons are visible' editButton controlButtons />\n```\n\n```javascript\n\u003cEditable contentRefs={this.handleNewTitle} name='Buttons are invisible' />\n```\n\nYou can specify which placeholder you would like to present on the input element. It is set to be 'Type here' as default.\n\n```javascript\n\u003cEditable contentRefs={this.handleNewTitle} name='Placeholder example' placeholder='Enter new ID' />\n```\n\nComponent also can be controlled by keys. Hit 'Enter' to save or 'Esc' to cancel your edit.\n\nStyling\n-------\n\nAs default, semantic-ui has utilized on this component. It will render via that styling as out of the box but you always can override it with your own css rules.\n\nGitHub\n------","PublishedAt":"2019-02-16T05:22:17.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:8098":{"id":"8098","__typename":"UploadFile","formats":{"200":"8ZopGV_PvoAJXVMmpuhRRgpvfvY=/200x0/React_Currency_Input_9f831eabcc.png","400":"jTA1kvQj1AAF-eRCElSYynG47SE=/400x0/React_Currency_Input_9f831eabcc.png","600":"8YZ_hbhM5sgK67zTt9d7usXiSBQ=/600x0/React_Currency_Input_9f831eabcc.png","800":"psiZyZIU8WlAhvZQ2stc1PXRG9I=/800x0/React_Currency_Input_9f831eabcc.png","1200":"h_18PdDI2-uEtDa01wPFckVCHFA=/1200x0/React_Currency_Input_9f831eabcc.png","1600":"41gLZ2dH7zw-D9rufb01ijPExS8=/1600x0/React_Currency_Input_9f831eabcc.png","2000":"Z8tnizLRA9iA8ocL-GGoYgfEWkY=/2000x0/React_Currency_Input_9f831eabcc.png","default":"psiZyZIU8WlAhvZQ2stc1PXRG9I=/800x0/React_Currency_Input_9f831eabcc.png","general":"psiZyZIU8WlAhvZQ2stc1PXRG9I=/800x0/React_Currency_Input_9f831eabcc.png","blur_400":"_i1vdfLF0tJ95tc4sjbux4Q4mSY=/400x0/filters:blur(8)/React_Currency_Input_9f831eabcc.png","blur_600":"bW4pLnmbjNitde0bHDCdqtWGs7E=/600x0/filters:blur(8)/React_Currency_Input_9f831eabcc.png","blur_800":"1lnwr0ynrHIn_8jw_frboE8D0YE=/800x0/filters:blur(8)/React_Currency_Input_9f831eabcc.png","blur_1200":"PnfyNpN59mMdRqngbRDLd0JBfaY=/1200x0/filters:blur(8)/React_Currency_Input_9f831eabcc.png","blur_1600":"aEOIYq0Yp1EK6K9w6oKP_TNJ2cc=/1600x0/filters:blur(8)/React_Currency_Input_9f831eabcc.png","mediaViewer":"h_18PdDI2-uEtDa01wPFckVCHFA=/1200x0/React_Currency_Input_9f831eabcc.png","thumbnail":"jTA1kvQj1AAF-eRCElSYynG47SE=/400x0/React_Currency_Input_9f831eabcc.png"},"width":1070,"height":464},"ContentsElastic:266051":{"id":"266051","__typename":"ContentsElastic","Title":"React Currency Input component","Slug":"react-currency-input-component","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:8098"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/react-currency-input-component/","Description":"React Currency Input component.","Body":"React Currency Input\n--------------------\n\nReact Currency Input component.\n\nInstallation\n------------\n\n> yarn add @pismo/react-currency-input\n\nUsage\n-----\n\n```js\nimport React, { Component } from 'react'\nimport CurrencyInput from '@pismo/react-currency-input'\n\nclass MyComponent extends Component {\n constructor(props) {\n super(props)\n this.state = { amount: 500 }\n }\n\n handleChange = (event, value, maskedValue) => {\n this.setState({ amount: value })\n }\n\n render() {\n const { amount } = this.state\n\n return (\n \u003cCurrencyInput value={amount} onChange={this.handleChange} />\n )\n }\n}\n```\n\n### Props\n\n* `currency`: 3-character acronym for the desired currency. \n Defaults to `BRL`. (`USD` is also supported without passing any `currencyConfiguration` object).\n \n* `currencyConfiguration`: Check `/src/constants/currencyConfigurations` for the pre-defined ones.\n \n* `showSymbol`: Whether to show or hide the `symbol` (passed on `currencyConfiguration`) on masked values. \n Defaults to `false`.\n \n* `spaceSymbol`: Appends a space `' '` to the configured `symbol`. e.g.: \"R$ 500,00\" instead of \"R$500,00\". \n Defaults to `false`.\n \n* `onChange`: Callback that gets called whenever user changes input value. \n Arguments: `event`, `value` and `maskedValue`.\n \n\nDevelopment\n-----------\n\nThis project uses [parcel](https://github.com/parcel-bundler/parcel) for zero-configuration bundling.\n\n> yarn global add parcel-bundler\n\nThen it should just work! This will run a dev server for you, which will serve the generated `/demo` folder\n\n> yarn start\n\nGenerating the distribution files in `/dist`:\n\n> yarn build\n\nGitHub\n------","PublishedAt":"2019-01-18T14:52:05.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:8141":{"id":"8141","__typename":"UploadFile","formats":{"200":"rN9yazzQaXs_PnGOkDlf2QSXMN0=/200x0/React_Widgets_47db42a39f.jpg","400":"-om5JLCGPyxD-jVE5q4oj7c7xvg=/400x0/React_Widgets_47db42a39f.jpg","600":"XUgNTXR6mkIpR8q4vZg_ki6GFr0=/600x0/React_Widgets_47db42a39f.jpg","800":"3PFxRuz2H5lHaEw-HdvbVxGJj08=/800x0/React_Widgets_47db42a39f.jpg","1200":"su_Zlg2RZw41MIJaRMZYhjFCBf8=/1200x0/React_Widgets_47db42a39f.jpg","1600":"qIDyJcww1A7mP3RJ5XLGQi0qBIc=/1600x0/React_Widgets_47db42a39f.jpg","2000":"NEmfxpMvnGJwOjAFX2whuX-CxiI=/2000x0/React_Widgets_47db42a39f.jpg","default":"3PFxRuz2H5lHaEw-HdvbVxGJj08=/800x0/React_Widgets_47db42a39f.jpg","general":"3PFxRuz2H5lHaEw-HdvbVxGJj08=/800x0/React_Widgets_47db42a39f.jpg","blur_400":"rhbuRFi92_rZ77hIrFHl6qAhs4E=/400x0/filters:blur(8)/React_Widgets_47db42a39f.jpg","blur_600":"-Z6dDVoo238qhrIF7nqBwWqQYCo=/600x0/filters:blur(8)/React_Widgets_47db42a39f.jpg","blur_800":"-YS8iIh1o9MWMVOl05JVzIVA0u8=/800x0/filters:blur(8)/React_Widgets_47db42a39f.jpg","blur_1200":"hd5tXEb5Iwyqs6z_ucF3jnaEBMs=/1200x0/filters:blur(8)/React_Widgets_47db42a39f.jpg","blur_1600":"pUq90BU287aE9Fc-kG8pctxlC54=/1600x0/filters:blur(8)/React_Widgets_47db42a39f.jpg","mediaViewer":"su_Zlg2RZw41MIJaRMZYhjFCBf8=/1200x0/React_Widgets_47db42a39f.jpg","thumbnail":"-om5JLCGPyxD-jVE5q4oj7c7xvg=/400x0/React_Widgets_47db42a39f.jpg"},"width":458,"height":265},"ContentsElastic:266084":{"id":"266084","__typename":"ContentsElastic","Title":"An accessible inputs built for React","Slug":"an-accessible-inputs-built-for-react","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:8141"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/an-accessible-inputs-built-for-react/","Description":"An à la carte set of polished, extensible, and accessible form inputs built for React.","Body":"react-widgets\n-------------\n\nAn à la carte set of polished, extensible, and accessible form inputs built for React.\n\n[View Demo](http://jquense.github.io/react-widgets/) [Download Source](https://github.com/jquense/react-widgets/archive/master.zip)\n\n### Install\n\n`npm install react-widgets`\n\n### Local development and contributing\n\nReact widgets, uses a \"monorepo\" organization style for managing multiple npm packages \nin a single git repo. This is done through a [Yarn](https://yarnpkg.com/en/) feature called \nworkspaces. To get everything setup and dependencies installed:\n\n* make sure you have the **latest** version of yarn installed\n* run `yarn run bootstrap` in the repo root directory\n\n#### Running the doc site locally\n\n* Follow the steps above\n* switch to the `www` directory and run `yarn`\n* `yarn run develop` to start the site\n\n#### Running the storybook examples\n\n* follow the general install instructions\n* run `yarn start-dev`\n\n### Old Browser Support\n\nThe goal is to support IE9+, but it is difficult for me to test a wide variety of browsers so there is no guarantee it will work (patches welcome!).\n\nGitHub\n------","PublishedAt":"2019-01-05T11:11:21.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:8177":{"id":"8177","__typename":"UploadFile","formats":{"200":"1_UBl-dnGsi-bq12g9k5wBQWxbs=/200x0/react_csv_reader_c0d5422b5e.jpg","400":"J4dm1kDlTfQvW8iyGXuXVeG6Elk=/400x0/react_csv_reader_c0d5422b5e.jpg","600":"-8P7la6Z629XOuO2lz7LklbUlBo=/600x0/react_csv_reader_c0d5422b5e.jpg","800":"Pmcx1RGvB_J0IgBMl0qjL-O9DTE=/800x0/react_csv_reader_c0d5422b5e.jpg","1200":"SYHVSQ2e8r2bH1mzYzbo5dvhyqY=/1200x0/react_csv_reader_c0d5422b5e.jpg","1600":"ZhOEoEk31DbDSZJAa7xCpnueO4Y=/1600x0/react_csv_reader_c0d5422b5e.jpg","2000":"J53MWRhwYleH8afJusY0l5TnDKE=/2000x0/react_csv_reader_c0d5422b5e.jpg","default":"Pmcx1RGvB_J0IgBMl0qjL-O9DTE=/800x0/react_csv_reader_c0d5422b5e.jpg","general":"Pmcx1RGvB_J0IgBMl0qjL-O9DTE=/800x0/react_csv_reader_c0d5422b5e.jpg","blur_400":"5UUVQmPHKfQl7VX8OVhP7JCQIKM=/400x0/filters:blur(8)/react_csv_reader_c0d5422b5e.jpg","blur_600":"fLbH2MQlwCoGEFB2bAcfyRj7k_E=/600x0/filters:blur(8)/react_csv_reader_c0d5422b5e.jpg","blur_800":"e15EKIAFRmiAvFHj4O-i2T3MbIQ=/800x0/filters:blur(8)/react_csv_reader_c0d5422b5e.jpg","blur_1200":"GuTI0GCddeyYjGiLoMHd2WVzWgg=/1200x0/filters:blur(8)/react_csv_reader_c0d5422b5e.jpg","blur_1600":"3WnV3oqOoeCuw2lPWeP7dO0fR8s=/1600x0/filters:blur(8)/react_csv_reader_c0d5422b5e.jpg","mediaViewer":"SYHVSQ2e8r2bH1mzYzbo5dvhyqY=/1200x0/react_csv_reader_c0d5422b5e.jpg","thumbnail":"J4dm1kDlTfQvW8iyGXuXVeG6Elk=/400x0/react_csv_reader_c0d5422b5e.jpg"},"width":356,"height":215},"ContentsElastic:266114":{"id":"266114","__typename":"ContentsElastic","Title":"React component that handles csv file input","Slug":"react-component-that-handles-csv-file-input","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:8177"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/react-component-that-handles-csv-file-input/","Description":"React component that handles csv file input and its parsing.","Body":"react-csv-reader\n----------------\n\nReact component that handles csv file input and its parsing.\n\nReact component that handles csv file input. \nIt handles file input and returns its content as a matrix.\n\n[View Demo](https://codesandbox.io/s/5058ln02lx) [Download Source](https://github.com/nzambello/react-csv-reader/archive/master.zip)\n\nInstallation\n------------\n\nInstall the package with either yarn or npm.\n\nWith yarn:\n\n```sh\nyarn add react-csv-reader\n```\n\nWith npm:\n\n```sh\nnpm install --save react-csv-reader\n```\n\nUsage\n-----\n\n```javascript\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport CSVReader from 'react-csv-reader'\n\nclass App extends Component {\n ...\n\n render() {\n return (\n \u003cCSVReader\n cssClass=\"csv-reader-input\"\n label=\"Select CSV with secret Death Star statistics\"\n onFileLoaded={this.handleForce}\n onError={this.handleDarkSideForce}\n inputId=\"ObiWan\"\n inputStyle={{color: 'red'}}\n />\n )\n }\n}\n\nReactDOM.render(\u003cApp />, document.getElementById('root'))\n```\n\n### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| cssClass | string | `csv-reader-input` | A CSS class to be applied to the wrapper element. |\n| cssInputClass | string | `csv-input` | A CSS class to be applied to the `\u003cinput>` element. |\n| label | string, element | | If present, it will be rendered in a `\u003clabel>` to describe input aim. |\n| onFileLoaded | function | | (**_required_**) The function to be called passing loaded results. |\n| onError | function | | Error handling function. |\n| parserOptions | object | `{}` | [PapaParse configuration](https://www.papaparse.com/docs#config) object override |\n| inputId | string | | An id to be applied to the `\u003cinput>` element. |\n| inputStyle | object | `{}` | Some style to be applied to the `\u003cinput>` element. |\n\n### Results\n\nWhen the file has been loaded, it will be parsed with [PapaParse](https://github.com/mholt/PapaParse) from a CSV formatted text to a matrix. \nThat matrix is returned to the parent component with `onFileLoaded` function (it will be passed as an argument). \nThe second argument to `onFileLoaded` will be the filename provided\n\nGitHub\n------","PublishedAt":"2018-12-24T12:06:05.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:8270":{"id":"8270","__typename":"UploadFile","formats":{"200":"VlcZo7C66fL3Sj1EsLMhxIzRx-g=/200x0/react_editmask_Examples_9a21df3eeb.jpg","400":"VnYFI0EOPCwY0cy5NhwthsvbLrY=/400x0/react_editmask_Examples_9a21df3eeb.jpg","600":"tiAG9RVKIBVaST2UFY5LhrsP9hk=/600x0/react_editmask_Examples_9a21df3eeb.jpg","800":"c6a24pSRmO7lip1Uv-tuXVXCaF0=/800x0/react_editmask_Examples_9a21df3eeb.jpg","1200":"aaGGSVBQ_TbS_XtOYeuROLHj7Nw=/1200x0/react_editmask_Examples_9a21df3eeb.jpg","1600":"LAbedXThsWfHHrZopEfKxBUHJQ4=/1600x0/react_editmask_Examples_9a21df3eeb.jpg","2000":"eKobxOsVUMg_E2DDLrJzn57Fst0=/2000x0/react_editmask_Examples_9a21df3eeb.jpg","default":"c6a24pSRmO7lip1Uv-tuXVXCaF0=/800x0/react_editmask_Examples_9a21df3eeb.jpg","general":"c6a24pSRmO7lip1Uv-tuXVXCaF0=/800x0/react_editmask_Examples_9a21df3eeb.jpg","blur_400":"BR5ajNLZZgzNhSsim1tLxxFonCA=/400x0/filters:blur(8)/react_editmask_Examples_9a21df3eeb.jpg","blur_600":"Gk0MeKP2N-CiIl1E4UToGu-ueHI=/600x0/filters:blur(8)/react_editmask_Examples_9a21df3eeb.jpg","blur_800":"B2mfYjCESAY0HTNVNVPPM4EWKbY=/800x0/filters:blur(8)/react_editmask_Examples_9a21df3eeb.jpg","blur_1200":"9pOdQLtLR7NoFLPTZh4BjyWYdNc=/1200x0/filters:blur(8)/react_editmask_Examples_9a21df3eeb.jpg","blur_1600":"oRbJWYK2jZBqS2pX87cu6rq6hBI=/1600x0/filters:blur(8)/react_editmask_Examples_9a21df3eeb.jpg","mediaViewer":"aaGGSVBQ_TbS_XtOYeuROLHj7Nw=/1200x0/react_editmask_Examples_9a21df3eeb.jpg","thumbnail":"VnYFI0EOPCwY0cy5NhwthsvbLrY=/400x0/react_editmask_Examples_9a21df3eeb.jpg"},"width":573,"height":414},"ContentsElastic:266176":{"id":"266176","__typename":"ContentsElastic","Title":"An edit mask for React based on regular expression syntax with cursor handling","Slug":"an-edit-mask-for-react-based-on-regular-expression-syntax-with-cursor-handling","MediaItems":[{"__typename":"ComponentMediaMediaItems","Purpose":"cover","URL":null,"File":{"__ref":"UploadFile:8270"}}],"Author":"n/a","SourceURL":"https://reactjsexample.com/an-edit-mask-for-react-based-on-regular-expression-syntax-with-cursor-handling/","Description":"An edit mask for React based on regular expression syntax with cursor handling.","Body":"react-editmask\n--------------\n\nAn edit mask for React based on regular expression syntax with cursor handling.\n\n[View Demo](https://akrumel.github.io/react-editmask/) [Download Source](https://github.com/akrumel/react-editmask/archive/master.zip)\n\nInstallation\n------------\n\nreact-editmask requires **React 0.14 or later.**\n\nTo install the stable version:\n\n```\nnpm install --save react-editmask\n```\n\nThis assumes you are using npm as your package manager.\n\nExample usage\n-------------\n\n```\n\u003cMaskedInput\n\tmask=\"ddd-dd-dddd\"\n\tplaceholder=\"Social security number\"\n/>\n```\n\nAn example is included to demonstrate the edit mask concepts and use of the built-in edit masks \nand comma pre/post processing functions.\n\nOverview\n--------\n\nEdit masking with the browser's is tricky because adding/removing characters before the \ncursor will cause undesired cursor positioning, typically moves to end of input. And masking is \nall about eating unwanted input and adding desired literal characters. The mask expression \nsyntax is _based_ on the regular expression syntax and consists of mask and literal characters. \nSee the 'Pattern expressions' section below for the mask characters. Any character in a mask \nexpression that is not a mask character is a literal character.\n\n### Literal handling\n\nInserting literal characters is a central feature of all edit masks. This allows typing \n'1234567890' to be transformed into '(123) 456-7890' or '11111900' to become '11/11/1990'. \nIntuitively handling the deletion of inserted formatted characters was an important design \ngoal for react-editmask. This is accomplished by inserting literal characters only when required \nto match the next mask character, a feature called lookahead.\n\nAn example should help clarify deletion handling. The edit mask for a US phone number could be \n'(ddd) ddd-dddd', where 'd' is the mask character matching a number character. The literals are \n'(', ')', ' ', and '-' characters. Starting with an empty :\n\n| Time | Display | Type | Output |\n| --- | --- | --- | --- |\n| 0 | | 1 | (1 |\n| 1 | (1 | | ( |\n| 2 | ( | | |\n\n### Augmented Masking\n\nreact-editmask enables augmented edit masking for situations that easier to perform in code \nthan through regular expression type domain languages. Inserting commas in numbers is a \ncommonly desired feature that is tricky and difficult to perform using regular-type expressions. \nSee the stackoverflow question on this topic for a [detailed analysis](http://stackoverflow.com/a/5917250). \nThe short answer is: (:?^|\\\\s)(?=.)((?:0|(?:[1-9](?:%5Cd*%7C%5Cd%7B0,2%7D(?:,%5Cd%7B3%7D)*)))?(?:.\\\\d\\*\\[1-9\\])?)(?!\\\\S).\n\nThis problem is handled through `preprocess` and `postprocess` properties. The properties are functions \nand have the following signatures:\n\n* `preprocess` : `(value, config) => value`\n* `postprocess` : `(config) => value`\n\nThe `config` argument is the structure used by `EditMask.js` for processing values during \n`onChange` events. This is an imperative structure, not immutable, so the `preprocess` and \n`postprocess` functions make changes to this structure as appropriate. The three properties of \nconcern to the augmentation functions are\n\n* `text` - the processed text and only applicable to postprocess\n* `selectionStart` - this is the `selectionStart` value from [HTMLInputElement.setSelectionRange()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)\n* `selectionEnd` - this is the `selectionEnd` value from [HTMLInputElement.setSelectionRange()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)\n\nThe trick to writing the `pre/postprocess` functions is to move the `selectionStart` and `selectionEnd` \nvalues as appropriate for characters these function add/remove from the `value` or `config.text` \nbefore the selection indices. So if you prepend a character then you would add one and if you remove \na character then subtract one.\n\nHere is an example of a MaskedInput that inserts commas for a floating point number:\n\n```\n\u003cMaskedInput\n\tmask=\"d+(/.d*)?\"\n\tacceptChars={ MaskedInput.acceptChar.digitsAdDots }\n\tpreprocess={ MaskedInput.fn.numberWithCommas.pre }\n\tpostprocess={ MaskedInput.fn.numberWithCommas.post }\n/>\n```\n\nSee the [numberWithCommasPre](https://github.com/akrumel/react-editmask/blob/master/src/fn/numberWithCommasPre.js) \nand [numberWithCommasPost](https://github.com/akrumel/react-editmask/blob/master/src/fn/numberWithCommasPost.js) \nfunctions for implementation examples.\n\n### Module contents\n\nThis module contain two main files:\n\n* `MaskedInput` - renders an component with edit masking support. This component \n uses the EditMask class for formatting and cursor management\n* `EditMask` - The mask engine for times when you want to implement your own edit mask functionality.\n\nPattern expressions\n-------------------\n\n```\n. - any single character except newline\nd - digit\n? - makes previous symbol or literal optional\n+ - one or more of the previous symbol or literal\n* - zero or more of the previous expression\n() - capture grouping\n/ - next symbol character becomes a literal value (notice using the forward slash and not the\n backslash to make reading expression strings easier)\n! - makes the previous expression required and is only meaningful after a literal. Literals are\n automatically inserted if there are characters to process in the input value when lookahead is\n set to true. The '!' after a literal means the user must actually input the literal character\n for it to be inserted into the matched text.\nall other - literal value\n```\n\n### Pattern examples\n\n```\nSSN: ddd-dd-dddd\nDate: dd?//dd?//dddd (forward slash is the literal escape character - not backslash)\nPhone: /(ddd/) ddd-dddd (space is a literal value, parentheses are used for group expressions\n\t so must be escaped when used as a literal)\nCurrency: d+(.d?d?)? (currently '.' is not a pattern symbol as it is in regular expressions.\n parentheses are used to group a set of pattern expressions, usually\n to apply an multiplicity operator like '?' or '+')\n```\n\nProperties\n----------\n\n### `mask` : `string`\n\nthe masking pattern to be applied to the `\u003cinput>`\n\n### `acceptChars` : function or regular expression (optional - default is `/./` which allows all characters)\n\nThe acceptChars property is an optional property that can be set to a regular expression or function. This property is used to accept or reject key presses independent of the edit mask. This is useful in filtering out characters excluded by the edit mask but that coule trigger literal due to lookahead processsing. The enter key is passed through the react onKeyPress event handler and is short-circuited past the acceptChars property processing.\n\nFunction signature is:\n\n```\nacceptChar(key, value, selectionStart, selectionEnd)\n```\n\nReturns `true` to allow the character and `false` to exclude. Specifying a function for this property is an advanced use case and most situations are more easily handled using a regular expression.\n\nMasks containing literal characters often require an `acceptChar` property to prevent non-matching characters from truncating the value from the cursor and inserting the next literal. For example, consider this edit mask for USD:\n\n```\n\u003cMaskedInput\n\tmask=\"d+(.d?d?)?\"\n\tacceptChars={ /[\\d\\.]/ }\n/>\n```\n\nThe `acceptChars` property will only allow digits and the `.` (period). All other characters are excluded from being processed by the mask. Without the `acceptChars` property, typing the letter `a` into `12I34.5` (where `I` represents the cursor) would result in the value being `12.`.\n\nAs a general rule, if you mask contains literals then build a regular expression that excludes all characters not in the mask. This could be done by default by the component and may be implemented in the future.\n\n### `formatter` : function (optional)\n\nFunction called when the input does not have the focus. The returned value becomes the display value. \nThis is useful for situations where you want to increase the context while not being actively edited, \nsuch as appending a dollar sign.\n\n### `postprocess` : `(config) => value` (optional)\n\nSee the 'Augmented Masking' discussion above for details.\n\n### `preprocess` : `(value, config) => value` (optional)\n\nSee the 'Augmented Masking' discussion above for details.\n\n### `onChange` : `(event: SyntheticEvent) => any`\n\nA callback which will be called any time the mask's value changes.\n\nThis will be passed a `SyntheticEvent` with the input accessible via `event.target` as usual.\n\n**Note:** this component currently calls `onChange` directly, it does not generate an `onChange` event which will bubble up like a regular `\u003cinput>` component, so you _must_ pass an `onChange` if you want to get a value back out.\n\n### Other props\n\nAny props supported by `\u003cinput>` components.\n\nAPI\n---\n\n### `value` : `string`\n\nThe standard React `value` property.\n\n### `isComplete()` : `boolean`\n\nReturns `true` if the input value completely satisfies the mask.\n\n### Masks\n\nCommonly used masks are specified in country files in the `lib` directory. At present there is a single file for the US:\n\n```\nimport { float } from \"react-editmask/lib/usMasks\";\n\n\u003cMaskedInput\n\tmask={ float }\n/>\n```\n\n### Augmentation functions\n\n#### Number with commas\n\nPre and postprocess functions for adding commas to numeral values.\n\n* `MaskedInput.fn.numberWithCommas.pre`\n* `MaskedInput.fn.numberWithCommas.post`\n\nNot yet implemented\n-------------------\n\n```\na - alpha character (case insensitive)\nU - uppercase alpha (converts lowercase letters)\nL - lowercase alpha\nw - alpha or numerical (case insensitive)\n{m[,n]} - m..n of the previous symbol or literal\n```\n\nGitHub\n------","PublishedAt":"2018-11-25T04:36:48.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\":20,\"where\":{\"_where\":{\"body\":\"{\\\"query\\\":{\\\"bool\\\":{\\\"must\\\":[{\\\"match\\\":{\\\"Keywords.Slug\\\":\\\"input\\\"}},{\\\"match\\\":{\\\"Sources.Secure\\\":\\\"reactjsx\\\"}}]}},\\\"sort\\\":[{\\\"PublishedAt\\\":\\\"desc\\\"},\\\"_score\\\"]}\"}}}":[{"__ref":"ContentsElastic:533934"},{"__ref":"ContentsElastic:265314"},{"__ref":"ContentsElastic:265350"},{"__ref":"ContentsElastic:265411"},{"__ref":"ContentsElastic:265424"},{"__ref":"ContentsElastic:265464"},{"__ref":"ContentsElastic:265488"},{"__ref":"ContentsElastic:265493"},{"__ref":"ContentsElastic:265500"},{"__ref":"ContentsElastic:265610"},{"__ref":"ContentsElastic:265715"},{"__ref":"ContentsElastic:265782"},{"__ref":"ContentsElastic:265785"},{"__ref":"ContentsElastic:265941"},{"__ref":"ContentsElastic:265983"},{"__ref":"ContentsElastic:266006"},{"__ref":"ContentsElastic:266051"},{"__ref":"ContentsElastic:266084"},{"__ref":"ContentsElastic:266114"},{"__ref":"ContentsElastic:266176"}]}}