{"_id":"@3rd1t/formal-native","_rev":"1-e6f57f0ffda984f98f3e1264bd0eef43","name":"@3rd1t/formal-native","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.2":{"version":"0.1.2","name":"@3rd1t/formal-native","author":{"name":"Kevin Wolf","email":"hi@kevinwolf.me"},"description":"Elegant form management primitives for the react hooks era","license":"MIT","homepage":"https://github.com/kevinwolfcr/formal#readme","repository":{"type":"git","url":"git+https://github.com/kevinwolfcr/formal.git"},"bugs":{"url":"https://github.com/kevinwolfcr/formal/issues"},"main":"lib/formal-native.js","types":"lib/formal-native.d.ts","directories":{"lib":"lib","test":"__tests__"},"publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./lib","build":"tsc","test":"echo \"Error: run tests from root\" && exit 1"},"dependencies":{"@3rd1t/formal":"^0.1.2"},"peerDependencies":{"react":">=16.8","yup":"*"},"devDependencies":{"react":"^16.8.6","react-dom":"^16.8.6","react-hooks-testing-library":"^0.4.0"},"_id":"@3rd1t/formal-native@0.1.2","_nodeVersion":"11.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-mmW2BhRnP2UudjGZ+/vXxBUe+1W/apH9CCl9/t5oc71HLol/+ofI1NwLMg/X4O5yc9gKxn3dyiOhEPjgvva5uA==","shasum":"e5fbebdb1b165df6df69a7ac8b33d3a4aa1c4e2c","tarball":"https://registry.npmjs.org/@3rd1t/formal-native/-/formal-native-0.1.2.tgz","fileCount":9,"unpackedSize":9530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdD3AGCRA9TVsSAnZWagAANe4P/0kR6+/CxBRGNko5g40F\nKcRVpdjngL76T6Aa2H17n/4yK0Gce+4XOoLIeosjbSLPRxa9csGAu5xC0Gd7\nIbkZ7Fl3PbRCp8QURJp3USdg0tzh9XJBf4zgvSJlHapp4NBzL26/B7AjmvQD\nPaic/54luJlATnNZdfCv7aZ0p1tk+OKiEOCGTdyassvmvUUndXkJuEG9eXLn\nbfACq6SMW7XJB7LtKd4K0fb4JakXyaEhlqodfPT8gco0jC0FSZBqJhfx6rGI\nAy/4cO+nIUS5pGoXuYr/ji5vohSZyWpXjkPGj8pRd+SfUw02iolTME4rSRqT\nFs7VyBWEEENU32QazG9hfsU6C0TYPGGfjJkfElyhU3mTLyV8ffQrL+Nd50Yj\nNjRMpFOf0YaaMw4qC23KYe2L9jECsJlyxYSR+xKK9OFSyiaQqvpokLNVHLUO\nFM6FOt8rl4Dy5heCau/+vrqrV93Wa7MyqdIKLUPrxVsSuMzXs7la0KbBWCAk\nd42EAMhFSj4ZgCIZRuuFbXsXDhtLw5QSR8qz/WeyeeUlz268hkC3WHAmUz03\n16bbEnVtzysreS8MnVFMFUliWOo392S+XIzqHbQZw5EUCNBdIW6XctBvF3wm\nbQgC/3ZP5k9q/rZhIk6D6AxrxiZCbVJixyXNijzWVtqZ/3eLXx5/EKR93o/n\nYS8a\r\n=J0ac\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBp7bvRYwpyhmoZnSSvNjVXZFzLxNRUlsY1gWKt7SgWKAiEAve4H9HiIemtFnr/OJKy+eo9wiiENGe7N04Yoy0DWMkA="}]},"maintainers":[{"name":"3rd1t","email":"3rdtai@gmail.com"}],"_npmUser":{"name":"3rd1t","email":"3rdtai@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formal-native_0.1.2_1561292806068_0.4196484913087275"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-23T12:26:46.040Z","0.1.2":"2019-06-23T12:26:46.285Z","modified":"2022-04-04T10:45:15.900Z"},"maintainers":[{"name":"3rd1t","email":"3rdtai@gmail.com"}],"description":"Elegant form management primitives for the react hooks era","homepage":"https://github.com/kevinwolfcr/formal#readme","repository":{"type":"git","url":"git+https://github.com/kevinwolfcr/formal.git"},"author":{"name":"Kevin Wolf","email":"hi@kevinwolf.me"},"bugs":{"url":"https://github.com/kevinwolfcr/formal/issues"},"license":"MIT","readme":"<a href=\"https://npmjs.com/package/@kevinwolf/formal-native\"><img src=\"https://img.shields.io/npm/v/@kevinwolf/formal-native.svg?label=npm&style=flat-square\" alt=\"@kevinwolf/formal-native\"></a>\r\n<a href=\"https://npmjs.com/package/@kevinwolf/formal-native\"><img src=\"https://img.shields.io/npm/dm/@kevinwolf/formal-native.svg?label=downloads&style=flat-square\" alt=\"@kevinwolf/formal-native\"></a>\r\n\r\n# @kevinwolf/formal-native\r\n\r\n📱 Native extension for [@kevinwolf/formal](https://npmjs.com/package/@kevinwolf/formal).\r\n\r\n## Table of Contents\r\n\r\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\r\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\r\n\r\n- [Install](#install)\r\n- [Usage](#usage)\r\n- [Tips](#tips)\r\n- [Extended documentation](#extended-documentation)\r\n\r\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\r\n\r\n## Install\r\n\r\n```shell\r\nyarn add @kevinwolf/formal-native\r\n```\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport React from \"react\";\r\nimport { Alert, View, Text, TextInput, Button } from \"react-native\";\r\nimport useFormal from \"@kevinwolf/formal-native\";\r\nimport * as yup from \"yup\";\r\n\r\nconst schema = yup.object().shape({\r\n  firstName: yup.string().required(),\r\n  lastName: yup.string().required(),\r\n  email: yup\r\n    .string()\r\n    .email()\r\n    .required()\r\n});\r\n\r\nconst initialValues = {\r\n  firstName: \"Tony\",\r\n  lastName: \"Stark\",\r\n  email: \"ironman@avengers.io\"\r\n};\r\n\r\nexport default function App() {\r\n  const formal = useFormal(initialValues, {\r\n    schema,\r\n    onSubmit: values => Alert.alert(JSON.stringify(values))\r\n  });\r\n\r\n  return (\r\n    <View>\r\n      <View>\r\n        <Text>First Name</Text>\r\n        <TextInput {...formal.getFieldProps(\"firstName\")} />\r\n        {formal.errors.firstName && <Text>{formal.errors.firstName}</Text>}\r\n      </View>\r\n\r\n      <View>\r\n        <Text>Last Name</Text>\r\n        <TextInput {...formal.getFieldProps(\"lastName\")} />\r\n        {formal.errors.lastName && <Text>{formal.errors.lastName}</Text>}\r\n      </View>\r\n\r\n      <View>\r\n        <Text>Email</Text>\r\n        <TextInput {...formal.getFieldProps(\"email\")} autoCapitalize=\"none\" />\r\n        {formal.errors.email && <Text>{formal.errors.email}</Text>}\r\n      </View>\r\n\r\n      <Button {...formal.getSubmitButtonProps()} title=\"Submit\" />\r\n    </View>\r\n  );\r\n}\r\n```\r\n\r\n## Tips\r\n\r\nAs you can see, the above code became a little verbose due to the repetition of the fields code, in order to abstract that repeated code, you can create a `Field` component and replace all those calls in App.js.\r\n\r\n**Field.js**\r\n\r\n```typescript\r\nimport React from \"react\";\r\nimport { View, Text, TextInput } from \"react-native\";\r\n\r\nexport default function Field({ label, error, ...props }) {\r\n  return (\r\n    <View>\r\n      <Text>{label}</Text>\r\n      <TextInput {...props} />\r\n      {error && <Text>{error}</Text>}\r\n    </View>\r\n  );\r\n}\r\n```\r\n\r\n**App.js**\r\n\r\n```diff\r\nimport React from \"react\";\r\n-import { Alert, View, Text, TextInput, Button } from \"react-native\";\r\n+import { Alert, View } from 'react-native'\r\nimport useFormal from \"@kevinwolf/formal-native\";\r\nimport * as yup from \"yup\";\r\n\r\n+import Field from './components/field'\r\n+import Button from './components/button'\r\n\r\nconst schema = yup.object().shape({\r\n  firstName: yup.string().required(),\r\n  lastName: yup.string().required(),\r\n  email: yup\r\n    .string()\r\n    .email()\r\n    .required()\r\n});\r\n\r\nconst initialValues = {\r\n  firstName: \"Tony\",\r\n  lastName: \"Stark\",\r\n  email: \"ironman@avengers.io\"\r\n};\r\n\r\nexport default function App() {\r\n  const formal = useFormal(initialValues, {\r\n    schema,\r\n    onSubmit: values => Alert.alert(JSON.stringify(values))\r\n  });\r\n\r\n  return (\r\n    <View>\r\n-      <View>\r\n-        <Text>First Name</Text>\r\n-        <TextInput {...formal.getFieldProps(\"firstName\")} />\r\n-        {formal.errors.firstName && (<Text>{formal.errors.firstName}</Text>)}\r\n-      </View>\r\n+      <Field {...formal.getFieldProps('firstName')} label=\"First name\" />\r\n\r\n-      <View>\r\n-        <Text>Last Name</Text>\r\n-        <TextInput {...formal.getFieldProps(\"lastName\")} />\r\n-        {formal.errors.lastName && (<Text>{formal.errors.lastName}</Text>)}\r\n-      </View>\r\n+      <Field {...formal.getFieldProps('lastName')} label=\"Last name\" />\r\n\r\n-      <View>\r\n-        <Text>Email</Text>\r\n-        <TextInput {...formal.getFieldProps(\"email\")} autoCapitalize=\"none\" />\r\n-        {formal.errors.email && (<Text>{formal.errors.email}</Text>)}\r\n-      </View>\r\n+      <Field {...formal.getFieldProps('email')} label=\"Email\" autoCapitalize=\"none\" />\r\n\r\n      <Button {...formal.getSubmitButtonProps()} title=\"Submit\" />\r\n    </View>\r\n  );\r\n}\r\n```\r\n\r\n## Extended documentation\r\n\r\nFor extended documentation, examples and contributing guidelines, please refer to [the monorepo containing this package](https://github.com/kevinwolfcr/formal).\r\n","readmeFilename":"README.md"}