\n );\n}\n```\n\nIf you want to use the Input component separately\n\n```js\nimport { Input } from 'gc-react-form-validation';\n\n...\n\n this.handleChange(val, 'text')}\n value={this.state.text}\n name=\"nameTxt\"\n placeholder=\"Type something that starts with a 'W'.\"\n customRegex={/\\bW/g}\n customErrorMessage=\"Must start with uppercase W\"\n type=\"text\"\n/>\n```\n\n### Using Custom Input Components\n\nThere are two ways of adding custom input components to the Form, ie. adding it to the Form template or adding it via the `customComponent` input field object property if you are using a wrapper of some sort\n\n#### Via Template\n\nTo add custom UI Components to Form via the template, put the custom component inside the template with a reference to the field below it. The reference represents where the error validation message would appear.\n\nIn the field object add the prop `customUI: true` to prevent the library UI from rendering.\n\nThe input would be validated everytime the input value changes.\n\n```js\n\ncustomDatePicker: {\n ...\n customUI: true,\n type: 'date'\n ...\n}\n...\n\n{({ fields }) => (\n
\n)}\n\n...\n```\n\n#### Via `customComponent`\nTo add a custom input component via the `customComponent` callback. The custom input component will be passed all the input properties including `handleInputChange` and `handleInputValidation` callbacks.\n\nThis method is best when dealing with more complicated form structures like when wrapping the form in its own wrapper to handle state and fields are created dynamically.\n\n```js\n\ncustomDatePicker: {\n ...\n customComponent: ({\n value,\n handleInputChange,\n handleInputValidation\n }) => (\n handleInputChange(newValue)}\n onBlur={() => handleInputValidation(value)} />\n ),\n type: 'date'\n ...\n}\n...\n\n{({ fields }) => (\n
\n)}\n\n...\n```\n\n### Input Props\n\nSome more props you can use.\n\n| Property | Definition | Required | Options |\n| --- | :--- | :--- | :--- |\n| type | Determines the type of validation and type of input to render | Required | text, email, password, date, range, name, textarea, select |\n| stateName | Accepts state variables to change the input _name of input field object_ | Optional | |\n| customUI | Accepts boolean value | Optional| true, false (_default_) |\n| onChange | Pass function to handle state changes when input value is changed| Required | |\n| extendedClassNames | CSS class for adding custom styling. | Optional | |\n| value | Accepts values for input | Required | |\n| disabled | When disabled is `false` the input field is disabled | Optional | true, false (_default_)|\n| maxLength | Maximum character length | Optional ||\n| minLength | Minimum character length | Optional ||\n| maxDate | Latest date, accepts date object |Optional||\n| minDate | Earliest date, accepts date object | Optional ||\n| max | Highest accepted number | Optional | |\n| min | Lowest accepted number | Optional | |\n| autocomplete | Information for browser autocomplete | Optional | | |\n| multi | When used with 'select' type allows for a multiple select list | Optional | |\n\n### Translations\n\nTo add translations to the validation messages pass a translation object to the `translations` prop of either the Form or Input component. If no translation object is found then default translations will be used.\n\nEach key/value pair corresponds to text in the library and must return a function.\n\nHere is an example of the expected translation object:\n\n```js\nconst translationsExample = {\n invalidEmailAddress: () => 'This email address is invalid',\n maxCharLength: max => `May not contain more than ${max} characters`,\n minCharLength: min => `May not contain less than ${min} characters`,\n invalidURL: () => 'This URL is invalid',\n minPasswordCharLength: min => `Password may not contain less than ${min} characters`,\n dateRange: (fromDate, toDate) => `Choose a date between ${fromDate.toDateString()} and ${toDate.toDateString()}`,\n maxDateRange: toDate => `Choose a date earlier than ${toDate}`,\n minDateRange: fromDate => `Choose a date later than ${fromDate}`,\n maxNumber: max => `Choose a number lower than ${max}`,\n minNumber: min => `Choose a number higher than ${min}`,\n maxSelectOptions: max => `May not select more than ${max} options`,\n minSelectOptions: min => `May not select less than ${min} options`,\n requiredField: () => 'This is a required field',\n defaultInvalidInput: () => 'Invalid input'\n}\n\n...\n\n\n...\n```\n\n## Updates\nGc-react-form-validation recently underwent an update with a few breaking changes.\n\nThe ui has also changed. Floating labels was removed in favour of bordered input containers.\n\n### Property name changes\n- `handleInputChange` on the Form component becomes `onInputChange`.\n- `isVisible` on the Input component is no longer used instead use `hidden`.\n- `title` on the Input component is no longer used instead use `label`.\n\n### New features\n- `stateName` is no longer required, instead input field object name will be used when no `stateName` is provided.\n- `onInputValidationSuccess` and `onFormValidationSuccess` are callbacks that can be passed to the Input and Form components, respectively, that get triggered when they are successfully validated. Useful for disabling submission buttons.\n- `onInputValidationFailure` and `onFormValidationFailure` are callbacks that can be passed to Input and Form components respectively that are triggered when the Input or Form component fails validation. `onInputValidationFailure` returns an error message relative to the input. `onFormValidationFailure` returns an error object with all the errors in the Form component.\n\n\nLast stable release before update: 0.7.83\n\n[](https://github.com/standard/standard)\n","maintainers":[{"email":"nymanchristine@gmail.com","name":"3leanore"},{"email":"chacestew@gmail.com","name":"chacestew"},{"email":"chrsvdmrw@gmail.com","name":"chrisvdm"}],"time":{"modified":"2022-05-03T05:59:28.065Z","created":"2017-10-05T11:04:00.156Z","0.1.1":"2017-10-05T11:04:00.156Z","0.1.2":"2017-10-06T06:51:59.877Z","0.1.3":"2017-10-09T07:56:43.100Z","0.2.0":"2017-10-09T11:12:01.421Z","0.2.1":"2017-10-10T07:36:59.475Z","0.2.2":"2017-10-10T07:49:35.844Z","0.2.3":"2017-10-10T12:00:48.822Z","0.2.4":"2017-10-10T12:07:14.345Z","0.2.5":"2017-10-10T12:15:30.932Z","0.2.6":"2017-10-12T14:51:40.854Z","0.2.7":"2017-10-18T11:22:44.128Z","0.2.8":"2017-10-18T14:16:51.447Z","0.2.9":"2017-11-17T13:47:41.547Z","0.3.1":"2017-11-24T08:19:01.207Z","0.3.2":"2017-11-24T09:30:41.625Z","0.3.3":"2017-11-24T10:07:44.428Z","0.3.4":"2017-11-27T10:02:20.690Z","0.3.5":"2017-11-27T10:18:14.687Z","0.3.6":"2017-12-21T06:41:44.897Z","0.3.7":"2017-12-21T10:08:48.344Z","0.3.8":"2017-12-21T13:47:49.737Z","0.3.9":"2017-12-21T14:39:53.470Z","0.3.10":"2018-01-02T09:16:45.772Z","0.3.11":"2018-01-05T10:38:49.555Z","0.3.12":"2018-01-05T12:29:56.239Z","0.3.13":"2018-03-12T12:37:41.401Z","0.4.2":"2018-03-23T10:05:24.664Z","0.4.3":"2018-03-28T07:14:11.781Z","0.4.4":"2018-04-04T07:24:00.919Z","0.4.5":"2018-04-04T07:42:18.066Z","0.4.6":"2018-04-05T11:06:31.265Z","0.5.0":"2018-04-18T15:00:42.580Z","0.5.1":"2018-04-19T07:11:39.173Z","0.5.2":"2018-04-19T07:41:14.958Z","0.5.3":"2018-04-19T09:53:30.106Z","0.5.4":"2018-04-19T11:36:14.553Z","0.5.5":"2018-04-19T12:20:19.675Z","0.5.6":"2018-04-20T14:37:06.969Z","0.5.7":"2018-06-19T12:56:37.537Z","0.5.8":"2018-06-20T08:26:56.490Z","0.5.9":"2018-06-20T15:16:20.248Z","0.5.10":"2018-07-04T11:21:27.346Z","0.5.11":"2018-07-10T11:01:07.071Z","0.5.12":"2018-07-16T13:31:48.876Z","0.6.0":"2018-07-30T06:51:04.109Z","0.6.1":"2018-08-07T07:08:41.600Z","0.6.3":"2018-08-15T12:25:50.632Z","0.6.4":"2018-08-15T12:34:06.136Z","0.6.5":"2018-08-17T09:00:40.558Z","0.6.6":"2018-08-22T12:25:23.914Z","0.6.7":"2018-08-22T13:23:08.995Z","0.6.8":"2018-09-11T07:08:30.830Z","0.6.9":"2018-09-20T08:54:26.559Z","0.7.0":"2018-10-03T14:39:40.494Z","0.7.1":"2018-10-04T12:10:51.710Z","0.7.2":"2018-10-09T07:53:35.814Z","0.7.3":"2018-10-18T13:55:18.189Z","0.7.4":"2018-10-23T06:18:49.551Z","0.7.5":"2018-10-24T09:44:09.150Z","0.7.6":"2018-10-27T09:32:35.698Z","0.7.7":"2018-11-05T10:29:49.302Z","0.7.8":"2018-11-29T11:53:14.222Z","0.7.81":"2018-11-29T12:00:55.343Z","0.7.82":"2018-12-10T12:05:03.477Z","0.7.83":"2018-12-10T12:51:04.425Z","1.0.0":"2018-12-21T20:28:09.395Z"},"author":{"name":"chrisnyman"},"license":"ISC","readmeFilename":"README.md","homepage":"https://github.com/GradConnection/gc-react-form-validation","repository":{"type":"git","url":"git+https://github.com/GradConnection/gc-react-form-validation.git"},"bugs":{"url":"https://github.com/GradConnection/gc-react-form-validation/issues"}}