{"_id":"9worphi-useform","_rev":"1-5eabfc7b1a87f568961c156394683511","name":"9worphi-useform","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"9worphi-useform","version":"1.0.0","description":"React hook for form control and validation","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Eric Gruby"},"license":"ISC","devDependencies":{"9worphi-helpers":"1.0.1","react":"^16.8.6"},"_id":"9worphi-useform@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.16.0","_npmUser":{"name":"ericgruby","email":"ericgruby@gmail.com"},"dist":{"integrity":"sha512-EZ65rZ3X4uy6qQjMCnVBP2eU7iqY6xejykWFl3ZrzjKq30pPw0wsZvTPXEhLWm/AKXLUiQFkdiOw6ck/qoyhWg==","shasum":"9d13ee83c5808ff08ec0fa5093ecc5da2ca319a6","tarball":"https://registry.npmjs.org/9worphi-useform/-/9worphi-useform-1.0.0.tgz","fileCount":3,"unpackedSize":3981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQGg9CRA9TVsSAnZWagAAG9oP/RsnZlXfBRwg4zzXDhRv\n1KsqqNCTVYwHlrfisdgsmPT2iTufcsNiVRNtbBYVEWUvA/DyNs27tbvxtYWo\nBqwPpmeEvNc1IbqlUB3rtF5f9JNcTpTtsY25FFlci+1XibVkVRcEegX/IXoA\ndjZcc0YYowlZ73hco4FpiYO7BT2eszL3YT1TnkkMcKcXXMtuu4zEfEmQEK/Z\nTLK5xmYt5dPXmniBlasAgY5DWAlDER3QcTyuNkqvkalj6vd8lis/lcCAMtTa\nMTojEfotmLZgEAP/kWphFFua9clk+8eM/5xR9OCd86Oy+k9GbEAPEXnIU7Db\nmsOE3rJRcJWL4hNVyewQdlocHUyfpNRRitPCitqP5EoYhCAJYuM99JYuoUCY\neKjtN+hIX+OJWQndDwarsB8Xo7nlsYgvUaoqpRDoNrBxhDPRYMPYsoFtrTat\nan57+ljv/O7obletC3og9aT+fVuB1Z13nZLDVO8g+2/lnhaIWSRC781M8cHy\nUyoKtMq9hQVwj5Sj9UoXN8e8k0o7/pjeywTo4BvC1gYwXPDons6Ru6DGxhE7\nZ53w+G5eW3D7w4Pbr+929gIdW1nkmpDyOOiclZExnjZSyjFDPR1AvF5GryDL\nEEc0KVVWUnI60x1bCEbLpOynmQr1SOmVV7/AcGwTTlDFJaKk1UL7J5nvTXih\nP2Te\r\n=70Ad\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGUke9wbSgZKc714eu2kMAsJvwPNgu7+PM+MT4Ruo2rWAiEA1sYrP11fF/zT/XYjPql/JKU7q0aBYIWRZPaTnETUZBU="}]},"maintainers":[{"name":"ericgruby","email":"ericgruby@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/9worphi-useform_1.0.0_1564502076505_0.3366215194531894"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-30T15:54:36.504Z","1.0.0":"2019-07-30T15:54:36.724Z","modified":"2022-04-04T10:25:27.198Z"},"maintainers":[{"name":"ericgruby","email":"ericgruby@gmail.com"}],"description":"React hook for form control and validation","author":{"name":"Eric Gruby"},"license":"ISC","readme":"# useForm Hook\r\n## Como utilizar\r\n```javascript\r\nimport useForm from \"9worphi-useForm\";\r\n\r\nconst formFields = {\r\n  title: {\r\n    label: \"Título\",\r\n    value: \"\",\r\n    validation: value => value !== \"Teste\" && value !== \"\",\r\n    errorFeedback: \"Insert a title\"\r\n  },\r\n  content: {\r\n    label: \"content\",\r\n    value: \"\"\r\n  },\r\n  author: {\r\n    label: \"Author\",\r\n    type: \"text\",\r\n    value: \"\",\r\n    validation: value => value !== \"\"\r\n  }\r\n};\r\n\r\nconst FormQualquer = () => {\r\n   // Chamando o Hook\r\n  const [formState, setField, validate] = useForm(formFields);\r\n  \r\n  // formState = Estado atual do form, com valores e validações\r\n  // setField = função para alterar campos do formulário\r\n  // validate = função para validar os campos conforme as \"validations\" acima\r\n\r\n  const onSubmit = e => {\r\n    e.preventDefault();\r\n    validate(({ errors, fields }) => {\r\n      if (Object.values(errors).length > 0) {\r\n        return;\r\n      }\r\n      console.log(fields);\r\n    });\r\n  };\r\n\r\n  return (\r\n    <form onSubmit={onSubmit}>\r\n        {/* Aplica um .map no formState para montar os campos */}\r\n      {Object.keys(formState).map(key => {\r\n        const field = formState[key];\r\n        const label = <label htmlFor={key}>{field.label}</label>;\r\n        const errorFeedback = field.errorFeedback && (\r\n          <div className=\"invalid-feedback\">{field.errorFeedback}</div>\r\n        );\r\n        return (\r\n          <div key={key}>\r\n            {label}\r\n            <br />\r\n            <input\r\n              type=\"text\"\r\n              invalid={field.invalid}\r\n              value={field.value}\r\n              // setField(campo, { propriedade: valor })\r\n              onChange={e => setField(key, { value: e.target.value })}\r\n            />\r\n            {errorFeedback}\r\n          </div>\r\n        );\r\n      })}\r\n      <button type=\"submit\">OK</button>\r\n    </form>\r\n  );\r\n};\r\n```","readmeFilename":"readme.md"}