{"id":16234145,"url":"https://github.com/zackify/validify","last_synced_at":"2025-04-09T17:24:15.622Z","repository":{"id":34672428,"uuid":"99355812","full_name":"zackify/validify","owner":"zackify","description":"Simple-as-possible React form validation","archived":false,"fork":false,"pushed_at":"2023-01-07T04:27:53.000Z","size":3020,"stargazers_count":276,"open_issues_count":19,"forks_count":15,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-02T10:50:01.088Z","etag":null,"topics":["form","form-validation","form-validation-react","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zackify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-04T15:24:48.000Z","updated_at":"2025-02-11T15:49:34.000Z","dependencies_parsed_at":"2023-01-15T08:30:28.066Z","dependency_job_id":null,"html_url":"https://github.com/zackify/validify","commit_stats":null,"previous_names":["navjobs/validify"],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fvalidify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fvalidify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fvalidify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fvalidify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zackify","download_url":"https://codeload.github.com/zackify/validify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248075550,"owners_count":21043613,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","form-validation","form-validation-react","react","react-native"],"created_at":"2024-10-10T13:15:08.925Z","updated_at":"2025-04-09T17:24:15.603Z","avatar_url":"https://github.com/zackify.png","language":"TypeScript","readme":"## React Validify\n\nsingle dependency, simplest way to validate and manage form state with hooks in React + React Native! With full test coverage and TS support.\n\n## Contents\n\n- [Install](#install)\n- [Getting Started](#getting-started)\n- [TypeScript Support](#typescript-support)\n- [Contributors](#contributors)\n\n## Install\n\n```\nnpm install react-validify lodash\n```\n\n## Getting Started\n\nThis api has been carefully thought out over the past year. It's been in use on multiple React websites and React Native mobile applications. Using the library is simple. Include the `Form` component, and wrap your `input`'s and `submit` buttons.\n\n```js\nimport Input from \"./input\";\nimport Submit from \"./submit\";\nimport { Form, rules } from \"react-validify\";\n\nconst { required, email } = rules;\n\nconst App = () =\u003e {\n  let [values, setValues] = React.useState({\n    email: \"test\",\n    nested: { test: \"this is nested\" },\n  });\n\n  return (\n    \u003cForm values={values} onValues={setValues}\u003e\n      \u003cInput name=\"email\" rules={[required, email]} /\u003e\n      \u003cInput name=\"name\" rules={[required]} /\u003e\n      \u003cInput name=\"date1\" rules={[greaterThanDate2]} /\u003e\n      \u003cInput name=\"date2\" /\u003e\n      \u003cInput name=\"nested.test\" /\u003e\n      \u003cSubmit /\u003e\n    \u003c/Form\u003e\n  );\n};\n```\n\nAdd `useField` to your own inputs inside the Form wrapper. This allows you to use the library with any type of input field.\nIt just needs to support a `handleChange` `handleBlur` and `value` prop. This is the `Input` component you see in the first example. Don't forget to pass the field `name` to the hook.\n\n```js\nimport React from \"react\";\nimport { useField, FieldProps } from \"react-validify\";\n\ntype Props = { placeholder: string } \u0026 FieldProps;\n\nconst Input = ({ name, rules, placeholder }: Props) =\u003e {\n  let { handleChange, handleBlur, value, errors } = useField({ name, rules });\n\n  return (\n    \u003cdiv\u003e\n      {errors ? \u003cp\u003e{errors[0]}\u003c/p\u003e : null}\n      \u003cinput\n        name={name}\n        value={value}\n        onBlur={handleBlur}\n        placeholder={placeholder}\n        onChange={(event) =\u003e handleChange(event.target.value)}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nAdd `useSubmit` to trigger submitting or validating:\n\n```js\nimport React from \"react\";\nimport { useSubmit } from \"react-validify\";\n\nconst Submit = (props) =\u003e {\n  let { canSubmit, handleSubmit } = useSubmit();\n\n  return (\n    \u003cdiv\n      onClick={() =\u003e handleSubmit((values) =\u003e console.log(\"submit!\", values))}\n      style={{ opacity: canSubmit ? 1 : 0.5 }}\n    \u003e\n      Submit Form\n    \u003c/div\u003e\n  );\n};\nexport default Submit;\n```\n\nThe callback passed to `handleSubmit` will only be triggered if validation is passing.\n\nCreate rules:\n\n```js\nconst testRule: RuleFn = (value, values) =\u003e\n  value.length \u003e values.date2.length ? \"Date can't be longer\" : null;\n```\n\nRules get a `value` and `values` arguments. This means you can validate an input, or validate it against other form values.\n\nRules are guaranteed to run on a field after the first time the field is blurred, and then any time an error is present, they will run onChange.\n\n## TypeScript Support\n\nWith TS enabled, you can create a type for your form values, like so:\n\n```tsx\ntype Values = {\n  email: string;\n  date1?: string;\n  name?: string;\n};\n```\n\nNow when we use the form, it looks like this:\n\n```tsx\nlet [values, setValues] = useState\u003cValues\u003e({\n    email: 'test',\n  });\n\n  return (\n    \u003cForm\n      values={values}\n      onValues={setValues}\n    \u003e\n      \u003cInput name=\"email\" rules={[required, email]}/\u003e\n    \u003c/Form\u003e\n  )\n}\n```\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/449136?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eZach Silveira\u003c/sub\u003e](https://zach.codes)\u003cbr /\u003e | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/2430381?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eRyan Castner\u003c/sub\u003e](http://audiolion.github.io)\u003cbr /\u003e |\n| :---------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------: |\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackify%2Fvalidify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzackify%2Fvalidify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackify%2Fvalidify/lists"}