![](\"https://raw.githubusercontent.com/blujedis/komo/master/fixtures/logo.png\"){kind=logo}
\n\n \n
src/example. You can also clone the repository source then run these examples. Form validation no matter your effort can get complicated. Komo works hard to simplify that but in the end some things just require more control. The examples will help you work through those use cases!\n\n```sh\n$ git clone https://github.com/blujedis/komo.git\n$ yarn install\n$ yarn start\n```\n\n## The Basics\n\nBelow we import react and komo then initialize the useForm hook.\nWe create our form element and the elements we need for our form inputs. We'll do a more complete example below but let's take it in steps so it's easier to make sense of.\n\n```jsx\nimport React, { FC } from 'react';\nimport useForm from 'komo';\n\nconst MyForm: FC = () => {\n\n const { register } = useForm();\n\n return (\n \n );\n\n};\nexport default MyForm;\n```\n\n### Error Component\n\nThis is just a simple example of what you can do watching our error state to display feedback to the user. The sky is really the limit but this will give you the idea.\n\n```jsx\n const Error = ({ name }) => {\n\n const prop = state.errors && state.errors[name];\n\n // No error at this key just return null.\n if (!prop || !prop.length)\n return null;\n\n const err = prop[0];\n\n // Simply return a div colored red with the error message.\n // See below for error object properties.\n return (defaultValue prop or defaultChecked in the case of a checkbox. Additionally you can set defaults in your defaults object, lastly you can set defaults in your yup schema.\n\n#### Using a Prop\n\n```jsx\n \n```\n\n#### Using Defaults Options\n\n```jsx\n const { register } = useForm({\n defaults: {\n firstName: 'Your_Name_Here'\n }\n });\n```\n\nKomo also supports promises for your defaults. Below we're just using Promise.resolve but you could use fetch or axios etc to get your data. Note errors are logged to the console but does not stop Komo's initialization. If an error or no data returned Komo will just initialize with an empty defaults object.\n\n```jsx\n const { register } = useForm({\n defaults: Promise.resolve({\n firstName: 'Your_Name_Here'\n })\n });\n```\n\n#### Using Yup Schema\n\nWhen using a yup schema for your validationSchema, Komo will grab the defaults and use them for your form model.\n\n```jsx\nimport * as yup from 'yup';\n\nconst schema = yup.object({\n firstName: string().default('Your_Name_Here')\n});\n\nconst { register } = useForm({\n validationSchema: schema\n});\n```\n\n#### Registering with Options\n\nKomo allows you to register with options as well. For example perhaps you wish to disable ALL validation triggers on a given element. \n\n```jsx\n\n```\n\n#### Nested Data\n\nKomo allows models with nested data. Any form field can have a mapped path enabling getting and setting from a nested prop.\n\nThe below will map errors in our error model { firstName: [ error objects here ] } but it's model data will get/set from the nested path of user.name.first.\n\n```jsx\n\n```\n\n#### Reinit After Effect \n\nThere are cases where you may need to initialize your data after you mount using **useEffect**. Komo exposes a method for this called reinit. This method is used by Komo internally itself.\n\n```tsx\nconst { reinit } = useForm({\n // options here.\n});\n\nuseEffect(() => {\n\n // some promise or state change data is now available.\n\n reinit(defaults_from_state);\n\n}, [defaults_from_state]);\n\n```\n\n## Hooks\n\nKomo has some built in hooks that make it trivial to wire up to fields or expose your own hooks using the built in withKomo helper.\n\nYour best bet is to clone the repo then run yarn start. Then navigate to the **/advanced** page. This will give you an idea of some of the cool stuff Komo can do.\n\n### useField Hook\n\nExpose the hook from Komo's main useForm hook, then call the hook and pass in the form element name you wish to use. Simple as that. Just remember your hook will not have access to the element until Komo has mounted.\n\n```jsx\nconst { useField } = useForm({\n // options here excluded for brevity.\n});\n\nconst firstName = useField('firstName');\n```\n\n### Companion Hook Components\n\nBelow we have an Error Component and a TextInput Component that use the errors exposed from our hook.\n\n```jsx\n/**\n * Simple component to display our errors.\n * @param props our error component's props.\n */\nconst ErrorMessage = ({ errors }) => {\n if (!errors || !errors.length)\n return null;\n const err = errors[0];\n return (name.first and name.last. We only want to trigger validation for fullName.\n\n```js\nconst model = {\n name: {\n first: 'Milton',\n last: 'Waddams'\n }\n}\n```\n\n#### Virtual Component\n\nWe create a virtual element below by passing in the second arg in our useField hook \nconst fullName = hook(name, true);. This tells Komo not wire up data binding\nevents as we typically would for an element.\n\n```tsx\nconst VirtualField: FC\n Virtual Value: {fullName.value}\n
\n\n \ntrue.\n\nThis feature can be disabled by setting options.castHandler to false or null.\n\nYou can also pass your own function that casts the value and simply returns it. \n\nAlthough your model will likely be converted to a string using JSON.stringify before posting \nto your server, casting the model value only allows you to do checks against the model state as you'd expect.\n\nAgain if this is not what you want simply disable it.\n\n```ts\nconst { register } = useForm({\n castHandler: (value, path, name) => {\n // do something with value and return.\n return value;\n }\n})\n```\n\n## UI Libraries\n\nYou can of course use Komo with most UI libraries although they may differ in configuration. Komo aims to give you granular control. It's up to use to create your own Component wrappers and things to make life easier. This is by design. Otherwise too many opinions get in the way.\n\n### Material UI\n\nWe'll show just the form and one input for brevity/clarity but using with Matieral is as simple as passing our register function to Material's inputRef prop.\n\n[See More From Material-UI Docs](https://material-ui.com/api/text-field/)\n\n```jsx\nimport Input from '@material-ui/core/Input';\n\n```\n\n## Docs\n\nSee [https://blujedis.github.io/komo/](https://blujedis.github.io/komo/)\n\n## Change\n\nSee [CHANGE.md](CHANGE.md)\n\n## License\n\nSee [LICENSE.md](LICENSE)\n","readmeFilename":"README.md","keywords":["komo","react","form","validation","forms","formik","react-hook-form","redux-form","rc-form"]}