\n \n {' '} I accept and agree Terms & Conditions.\n
\n
\n
\n );\n}\n\n```\nYou see `useForm` takes the name of your `input` and changes the object, so you only have to create one `useForm`.\nYou can have as many items in the object, and this \nallows many inputs, but with still **_one_** `useForm`.\nAnd it eliminates the use of a lambda function.\n\n[](https://codesandbox.io/s/m770pm84n8)\n\n### useTrafficLight\n___\n\n#### Before\n\n```jsx\nconst lightDurations = [5000, 4000, 1000];\n\nconst BeforeTrafficLight = ({ initialColor }) => {\n const [colorIndex, setColorIndex] = useState(initialColor);\n\n useEffect(\n () => {\n const timer = setTimeout(() => {\n setColorIndex((colorIndex + 1) % 3);\n }, lightDurations[colorIndex]);\n return () => clearTimeout(timer);\n },\n [colorIndex]\n );\n\n return (\n
\n );\n};\n```\n\n[](https://codesandbox.io/s/zqo981j4ym)\n\n## `useStep`; Alpha code addtion\n\nThe new alpha `useStep` is the new `useTrafficLight`, and is a more general step wizard.\n\n> What it returns:\nstep\nduration\nisPaused\nnext\nprevious\ngo\nplay\npause\n\n\n[](https://codesandbox.io/s/31228l0rnm)\n\n## My Coding Journey\n\nOn Dec 18, 2017, I did a talk at [ReactNYC](https://www.meetup.com/ReactNYC/) about the `useTrafficLight` code above, but it was the \"before\" code and did not use a custom hook, and _certainly_ not `react-hooks-helper` because it was not out yet! Here's my video.\n\n[](https://www.youtube.com/watch?v=mbiryVTIJ4Q&t=3s)\n\n\n## License\n\n**[MIT](LICENSE)** Licensed\n","readmeFilename":"README.md","gitHead":"82f8089b5c663f77a61878f3a7cc1513f22470b2","bugs":{"url":"https://github.com/revelcw/react-hooks-helper/issues"},"homepage":"https://github.com/revelcw/react-hooks-helper#readme","_id":"react-hooks-helper@1.3.0-alpha.0","_npmVersion":"6.5.0","_nodeVersion":"10.14.2","_npmUser":{"name":"revelcw","email":"revelcarlbergwest@gmail.com"},"dist":{"integrity":"sha512-Lw1SMVgAlxzwiGfx0qDo7CwcMyFuG8MOAxPkXPV+o60BL6XUEopUWpUE8M9cQb4QKIF8jozIReesLSFq8tl80g==","shasum":"6651c25f91098de0aac3f969948fc126ebe92ef4","tarball":"https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.3.0-alpha.0.tgz","fileCount":6,"unpackedSize":13285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLU5GCRA9TVsSAnZWagAA7DEP/1OduB1MQIDAZgXxmEaw\n6TZfs1rrBwldR0ma/K9HfxGsDjKZALx6caKpM9aJqstQZdwSWp+iJ1sZgW55\nRSxTsVS2+vWPeafJT5WZqnfmX78REvvtNwrVby6IGE/1YJBWYT1XDbP0qlpd\nuynit2iZHSamlN233h3JpCqp49SSROr6+3TLNy1uaX9U8aJiMXdiYxcPH7K5\nf8tSBjaxnjK2r1wLyBd441gWutQdVaV2JB7+2sXWXRJ5ARMLNdY3iUqH6VPF\nXH6JGrr9+1kLwkAZDRJLKJf4KmiL9GZNTtP3YU+i/CKro2qrMGbvg+g6myyB\nOU6lYDN51io+M2YSXXJgwXCc76/IJ4B+vNL+diQVlaA8VhPbYOlpD5fG8GFp\nCURJ6KDceieQJTZtO/SgMLS8ulcxhlGRt2Q0P09T3QuxxOdKMWhH+Bn5Zr1z\nB/qxyMZenRICC9/O4Q9siHPsGaE76q+oipM5m7RtuockOnfYSO2fqChRZUxE\ns1+9UQyI1sVXwv8x0I2/AjRLGYyp2IYGDx21iXRu6vJ0SAMXYk9E6QvR0VnL\nMMM5ani2jOhb+aTaadrggTieECJbaCatbSRyL4xUgikyX2rcmLQrJ37shnKa\n3e4IhsW8FaqJxjH4k/+i2TJA8ahozZIaYB4M+ANmwHUUHwg9nfCvfD8OWbJx\nrBhC\r\n=QHmC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3VpsRg5bt74HiKSTlO2wROMBYJTsJRYrbTMVZOwkYWgIgI7tXUh5e8jP/Nuln/CE0p/lVdk0q+JGITg4Ktiw4nP8="}]},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hooks-helper_1.3.0-alpha.0_1546473029505_0.2867889591632029"},"_hasShrinkwrap":false},"1.3.0-alpha.1":{"name":"react-hooks-helper","version":"1.3.0-alpha.1","description":"A custom React Hooks library that gives you custom hooks for your code.","main":"dist/react-hooks-helper.js","umd:main":"dist/react-hooks-helper.umd.js","module":"dist/react-hooks-helper.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/revelcw/react-hooks-helper.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib"],"author":{"name":"revelcw"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"16.7.0-alpha.2","react-dom":"16.7.0-alpha.2","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.7.0-alpha.2"},"readme":"# react-hooks-helper\n\nA custom [React Hooks](https://reactjs.org/docs/hooks-overview.html) library that gives you custom hooks for your code.\n\n[](https://badge.fury.io/js/react-hooks-helper)\n\n\n\n## Requirement ⚠️\n\nTo use `react-hook-lib`, you must use at minimum `react@16.7.0-alpha.0`. React Hooks is currently at **[RFC](https://github.com/reactjs/rfcs/pull/68)** stage.\n\n## Installation\n\n```sh\n$ npm i react-hooks-helper\n```\n\n##\nUsage\n \n```js\nconst [bar, notBar] = useNot(bool);\nconst [{foo, bar}, setForm] = useForm({foo, bar});\nconst currentValue = useTrafficLight(initialIndex, durations);\n```\n\n## Examples\n\n### useNot\n`useNot` is a toggle function for react apps.\n___\nHere is a simple App that toggles a value to produce either a **blue** or a **red** square.\n\n#### Before\n\n \n```jsx\nfunction App() {\n const [value, setValue] = useState(false);\n return (\n (\n setValue( !value )\n )}\n style={{\n width: 100,\n height: 100,\n backgroundColor: value ? 'red' : 'blue'\n }}\n />\n );\n```\n\n#### After\n\n```jsx\nfunction App() {\n const [value, notValue] = useNot(false);\n return (\n \n );\n}\n```\n\n\n`value`, a boolean, is a variable.\n`notValue`function that nots the value from `true` to `false` and vise versa.\nNotice the `notValue` is not a lambda function, like in the **[before](#useNotBefore)**\n\n[](https://codesandbox.io/s/rwk86po7rn)\n\n### useForm\n`useForm` is for an advanced search, sign-up form, etc, something with a lot of text felds, because you only need to use one hook. Wereas on the otherwise you would need many `useState` hooks.\n___\n\n#### Before\n\nRight here is some code for a sign-up form. As you can see it is using two `useState` hooks and we need a lambda function to change it.\n\n```jsx\nfunction App() {\n const [firstName, setFirstName] = useState(\"\");\n const [lastName, setLastName] = useState(\"\");\n const [gender, setGender] = useState(\"Male\");\n const [isAccept, setAcceptToC] = useState(false);\n return (\n
\n \n {' '} I accept and agree Terms & Conditions.\n
\n
\n
\n );\n}\n\n```\nYou see `useForm` takes the name of your `input` and changes the object, so you only have to create one `useForm`.\nYou can have as many items in the object, and this \nallows many inputs, but with still **_one_** `useForm`.\nAnd it eliminates the use of a lambda function.\n\n[](https://codesandbox.io/s/m770pm84n8)\n\n### useTrafficLight\n___\n\n#### Before\n\n```jsx\nconst lightDurations = [5000, 4000, 1000];\n\nconst BeforeTrafficLight = ({ initialColor }) => {\n const [colorIndex, setColorIndex] = useState(initialColor);\n\n useEffect(\n () => {\n const timer = setTimeout(() => {\n setColorIndex((colorIndex + 1) % 3);\n }, lightDurations[colorIndex]);\n return () => clearTimeout(timer);\n },\n [colorIndex]\n );\n\n return (\n
\n );\n};\n```\n\n[](https://codesandbox.io/s/zqo981j4ym)\n\n## `useStep`; Alpha code addtion\n\nThe new alpha `useStep` is the new `useTrafficLight`, and is a more general step wizard.\n\n\n##### To Install:\n```sh\n$ npm i react-hooks-helper@next\n```\n\nOr edit some a photo carousel on codeSandbox\n\n[](https://codesandbox.io/s/31228l0rnm)\n\n## My Coding Journey\n\nOn Dec 18, 2017, I did a talk at [ReactNYC](https://www.meetup.com/ReactNYC/) about the `useTrafficLight` code above, but it was the \"before\" code and did not use a custom hook, and _certainly_ not `react-hooks-helper` because it was not out yet! Here's my video.\n\n[](https://www.youtube.com/watch?v=mbiryVTIJ4Q&t=3s)\n\n\n## License\n\n**[MIT](LICENSE)** Licensed\n","readmeFilename":"README.md","gitHead":"3bd3747a9447412c564778806ac10fa5e3088cee","bugs":{"url":"https://github.com/revelcw/react-hooks-helper/issues"},"homepage":"https://github.com/revelcw/react-hooks-helper#readme","_id":"react-hooks-helper@1.3.0-alpha.1","_npmVersion":"6.5.0","_nodeVersion":"10.14.2","_npmUser":{"name":"revelcw","email":"revelcarlbergwest@gmail.com"},"dist":{"integrity":"sha512-OOCqEPm9pGFFUpkxVK5pchfUXEMXvo6zgRa78eVH5F/Zi4UonZNFeFT2vI8Pm1c6UVuOCHE9NLc5nefTfSlrNQ==","shasum":"57e94bd22587a1c2dc44a2621a811a2d4fe2f542","tarball":"https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.3.0-alpha.1.tgz","fileCount":6,"unpackedSize":15569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLgh6CRA9TVsSAnZWagAAVrkP/0EThp57XEwOBujTHBEJ\nqyz1KjwnGXLDeNoVMgpsFKivUfqSNvT+W1dn6tpeMzpzo9wlliKLW2cWm6L4\n20nRPZA90D5wiU31d9GZkY2eLRSgjGTSjhuKkkyjNJ2YGgD/rPpxWlWABcT1\nd/T/9WW3z/4DUeDC0EeFipTgU/XrYoqLMVNqG250E0AEy8DtradiroW4vilh\nmqZ7lWxwoUHqxCg0PS2DMY9gFefQKk0q+06EyO/3PodD+bqpEaEYmSk2d+ZR\noQl1bUrLIK9pHrkzV9S844SvlE6J5WyItjLaH68MR3ZCR60p0Cjgz5MSTJrO\nWXjOLtas+IelLuuCSO+dPp29XSEy+LsEhRBmld1vZSJ0su5zvygpl0P2AiP2\nN+lWdBc0nTqt0lZ4DU+4X0XGQaNYDfQZk+44+aAsn2jkQsGeWVJlX/nAh4q2\nfMVL+eYz2NVr/3W69eJ4sGyfgPug63xBzSeFAFxmvlBVOkv49O91arGTnJyc\nIQti2F/nIKXHdkwWB/vnQNM5VuqMkwR45NlG/Z8H2g3xKvU1npas1pp8gbNu\nsqsRyAk8klufMAKZvUP5M0i0zVPPTiHi+NRO5WFBhSePTEUcVr7Wv/eZP7pe\nSypYvRwlwQdSHc0qARFXFiAOfdaEEpPTP0Pu1T9BDJy/NvPP+bWOSySxsSwS\n3VuF\r\n=qDTs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7YRHugxcNXiXcvXukkryXR9u3HkFQ4s8qRUvvqI0QNgIhAJsTHB/gTQDIINmrfPT2DIo62VMKGwuzgklVcPV1Ucm/"}]},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hooks-helper_1.3.0-alpha.1_1546520697770_0.5087537563263036"},"_hasShrinkwrap":false},"1.3.0-alpha.2":{"name":"react-hooks-helper","version":"1.3.0-alpha.2","description":"A custom React Hooks library that gives you custom hooks for your code.","main":"dist/react-hooks-helper.js","umd:main":"dist/react-hooks-helper.umd.js","module":"dist/react-hooks-helper.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/revelcw/react-hooks-helper.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib"],"author":{"name":"revelcw"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"16.7.0-alpha.2","react-dom":"16.7.0-alpha.2","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.7.0-alpha.2"},"readme":"# react-hooks-helper\n\nA custom [React Hooks](https://reactjs.org/docs/hooks-overview.html) library that gives you custom hooks for your code.\n\n[](https://badge.fury.io/js/react-hooks-helper)\n\n\n\n## Requirement ⚠️\n\nTo use `react-hook-lib`, you must use `react@16.7.0-alpha.2`. React Hooks is currently at **[RFC](https://github.com/reactjs/rfcs/pull/68)** stage.\n\n## Installation\n\n```sh\n$ npm i react-hooks-helper\n```\n\n##\nUsage\n \n```js\nconst [bar, notBar] = useNot(bool);\nconst [{foo, bar}, setForm] = useForm({foo, bar});\nconst currentValue = useTrafficLight(initialIndex, durations);\n```\n\n## Examples\n\n### useNot\n`useNot` is a toggle function for react apps.\n___\nHere is a simple App that toggles a value to produce either a **blue** or a **red** square.\n\n#### Before\n\n \n```jsx\nfunction App() {\n const [value, setValue] = useState(false);\n return (\n (\n setValue( !value )\n )}\n style={{\n width: 100,\n height: 100,\n backgroundColor: value ? 'red' : 'blue'\n }}\n />\n );\n```\n\n#### After\n\n```jsx\nfunction App() {\n const [value, notValue] = useNot(false);\n return (\n \n );\n}\n```\n\n\n`value`, a boolean, is a variable.\n`notValue`function that nots the value from `true` to `false` and vise versa.\nNotice the `notValue` is not a lambda function, like in the **[before](#useNotBefore)**\n\n[](https://codesandbox.io/s/rwk86po7rn)\n\n### useForm\n`useForm` is for an advanced search, sign-up form, etc, something with a lot of text felds, because you only need to use one hook. Wereas on the otherwise you would need many `useState` hooks.\n___\n\n#### Before\n\nRight here is some code for a sign-up form. As you can see it is using two `useState` hooks and we need a lambda function to change it.\n\n```jsx\nfunction App() {\n const [firstName, setFirstName] = useState(\"\");\n const [lastName, setLastName] = useState(\"\");\n const [gender, setGender] = useState(\"Male\");\n const [isAccept, setAcceptToC] = useState(false);\n return (\n
\n \n {' '} I accept and agree Terms & Conditions.\n
\n
\n
\n );\n}\n\n```\nYou see `useForm` takes the name of your `input` and changes the object, so you only have to create one `useForm`.\nYou can have as many items in the object, and this \nallows many inputs, but with still **_one_** `useForm`.\nAnd it eliminates the use of a lambda function.\n\n[](https://codesandbox.io/s/m770pm84n8)\n\n### useTrafficLight\n___\n\n#### Before\n\n```jsx\nconst lightDurations = [5000, 4000, 1000];\n\nconst BeforeTrafficLight = ({ initialColor }) => {\n const [colorIndex, setColorIndex] = useState(initialColor);\n\n useEffect(\n () => {\n const timer = setTimeout(() => {\n setColorIndex((colorIndex + 1) % 3);\n }, lightDurations[colorIndex]);\n return () => clearTimeout(timer);\n },\n [colorIndex]\n );\n\n return (\n
\n );\n};\n```\n\n[](https://codesandbox.io/s/zqo981j4ym)\n\n## `useStep` (@next alpha only)\n\nThe new `useStep` is the new `useTrafficLight`, and is a more general step wizard.\n\n#### To install the alpha:\n```sh\n$ npm i react-hooks-helper@next\n```\n\n#### Usage\n\n```js\nconst {\n isPaused,\n index,\n step,\n navigation,\n} = useStep(config);\n```\n##### Config\n\nYou pass `useStep` a configuration object containing the following (\\* = required).\n\n| Key | Description |\n| :------------ |:------------- |\n| `steps`\\* | Either an array containing the steps to process or an integer specifying the number of steps. |\n| `initialStep` | The starting step—either a string id or an index. Default = 0. |\n| `autoAdvanceDuration` | If you wish the steps to auto-advance, specify the number of milliseconds. You can also include an `autoAdvanceDuration` in each `step` in your `steps` array, if you wish to have different durations for each step. |\n\n##### Return object\n\n| Key | Description |\n| :------------ |:------------- |\n| `isPaused` | `true` if the `autoAdvanceDuration` is paused. |\n| `index` | A number containing the current step index. |\n| `step` | The current `step` object from the `steps` array. |\n| `navigation` | A `navigation` object (see below). |\n\n##### Navigation object\n\nThe `navigation` object returned from `useStep` contains control callback functions as follows.\n\n| Key | Description |\n| :------------ |:------------- |\n| `previous` | Call to navigate to the previous item index. Wraps from the first item to the last item. |\n| `next` | Call to navigate to the next item index. Wraps from the last item to the first item. |\n| `go` | Call to navigate to a specific step by `id` or by `index`. Example: `go(2)` or `go('billing-address')` |\n| `pause` | Pause auto-advance navigation. |\n| `play` | Play auto-advance navigation once it has been paused. |\n\n\n#### Live demo\n\nYou can view/edit the photo carousel on CodeSandbox.\n\n[](https://codesandbox.io/s/31228l0rnm)\n\n## My Coding Journey\n\nOn Dec 18, 2017, I did a talk at [ReactNYC](https://www.meetup.com/ReactNYC/) about the `useTrafficLight` code above, but it was the \"before\" code and did not use a custom hook, and _certainly_ not `react-hooks-helper` because it was not out yet! Here's my video.\n\n[](https://www.youtube.com/watch?v=mbiryVTIJ4Q&t=3s)\n\n\n## License\n\n**[MIT](LICENSE)** Licensed\n","readmeFilename":"README.md","gitHead":"1634129402b4fb6f802b965b6e99a223a2bbc56f","bugs":{"url":"https://github.com/revelcw/react-hooks-helper/issues"},"homepage":"https://github.com/revelcw/react-hooks-helper#readme","_id":"react-hooks-helper@1.3.0-alpha.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-/HjVbWm7Th62MJSjmZvT30Ap1oeoSblNJUycxspYgMblkpCaPecEt+9QY0OqyvnawPXMHhtkRzies+aFgAmzxA==","shasum":"798d63ace5419b83744fd36999b2a4a49750d8b5","tarball":"https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.3.0-alpha.2.tgz","fileCount":6,"unpackedSize":17481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLlmjCRA9TVsSAnZWagAA8QcP/A16DP3vBiVdxNBUh848\nRxSnM6HVmjkeT3Fsyb+rP2/xyg/WBfq9jzsdM7K8eR99FelaCeg55MdafYW2\nweOOMNst6a32gCO6uPN/9bYRULq3dibg/iBfMT/Y2NWhtgCdYdDr77oP2sSk\nglGbpTY0qypCWCpFs5Bm6ol5B1ZLwlPd9NwY2WnGrWbj9ZdTIJQGAQgatLAJ\nIr2yhuTPwpYGVWOI94G6UIw+DNYg05QK7+J+VtPaKx/tr3u4Nzw44jnl6y5I\nUvdUYXOpLW1ywYor74soaMxRh2lJufGaBafznp9Lv/Q5UrevR32lJ/d8X2sJ\nRnRdY0SJsFcVL8oRdKVjQbi6X7o9PmfR1opfDFK2dI0RHFOirqqaPAuPbkWs\na9WXhp6whZYQxt53XW3YX8HQT545RxWnY8zxh0hVZOXxwiWdkxePEw6gc33p\nqenQD0aR0H71xDSzjJrSa7SoDs3PO1ec3B5oy1qArB1mAYWJEGvHk38Ff3N8\n2DYa2Qoxsol/H/4rGSVaadpF5Tr6eqkxamHlEiqg1AD2bjdg7D+srPBINkX9\noNfepZlZurTzdjKiUFSHuXkJcH1bLP5krbqqssV2F56VdJxf9jkeR7Zz4XMJ\nVyxDZG9U6MQqfkiIX6JifhvL6QiABatVv2Az3OHplo8Z0f+5oVNHDFAAvf4Y\ngq/h\r\n=7Gl8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlNOccIQzUBMS5DB1Dc2IGzwIQVi/1uVJR64+TGL6iHAIhAMRwryBsZ4y4r+1YVGgaKstIiWihjIx71cDcIiQ2ec64"}]},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hooks-helper_1.3.0-alpha.2_1546541474561_0.46104495032171733"},"_hasShrinkwrap":false},"1.3.0-alpha.3":{"name":"react-hooks-helper","version":"1.3.0-alpha.3","description":"A custom React Hooks library that gives you custom hooks for your code.","main":"dist/react-hooks-helper.js","umd:main":"dist/react-hooks-helper.umd.js","module":"dist/react-hooks-helper.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/revelcw/react-hooks-helper.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib"],"author":{"name":"revelcw"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"16.7.0-alpha.2","react-dom":"16.7.0-alpha.2","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.7.0-alpha.2"},"readme":"# react-hooks-helper\n\nA custom [React Hooks](https://reactjs.org/docs/hooks-overview.html) library that gives you custom hooks for your code.\n\n[](https://badge.fury.io/js/react-hooks-helper)\n\n\n\n## Requirement ⚠️\n\nTo use `react-hook-lib`, you must use `react@16.7.0-alpha.2`. React Hooks is currently at **[RFC](https://github.com/reactjs/rfcs/pull/68)** stage.\n\n## Installation\n\n```sh\n$ npm i react-hooks-helper\n```\n\n## Usage\n \n```js\nconst [bar, notBar] = useNot(bool);\nconst [{foo, bar}, setForm] = useForm({foo, bar});\nconst currentValue = useTrafficLight(initialIndex, durations);\n```\n\n## Examples\n\n### useNot\n`useNot` is a toggle function for react apps.\n___\nHere is a simple App that toggles a value to produce either a **blue** or a **red** square.\n\n#### Before\n\n \n```jsx\nfunction App() {\n const [value, setValue] = useState(false);\n return (\n (\n setValue( !value )\n )}\n style={{\n width: 100,\n height: 100,\n backgroundColor: value ? 'red' : 'blue'\n }}\n />\n );\n```\n\n#### After\n\n```jsx\nfunction App() {\n const [value, notValue] = useNot(false);\n return (\n \n );\n}\n```\n\n\n`value`, a boolean, is a variable.\n`notValue`function that nots the value from `true` to `false` and vise versa.\nNotice the `notValue` is not a lambda function, like in the **[before](#useNotBefore)**\n\n[](https://codesandbox.io/s/rwk86po7rn)\n\n### useForm\n`useForm` is for an advanced search, sign-up form, etc, something with a lot of text felds, because you only need to use one hook. Wereas on the otherwise you would need many `useState` hooks.\n___\n\n#### Before\n\nRight here is some code for a sign-up form. As you can see it is using two `useState` hooks and we need a lambda function to change it.\n\n```jsx\nfunction App() {\n const [firstName, setFirstName] = useState(\"\");\n const [lastName, setLastName] = useState(\"\");\n const [gender, setGender] = useState(\"Male\");\n const [isAccept, setAcceptToC] = useState(false);\n return (\n
\n \n {' '} I accept and agree Terms & Conditions.\n
\n
\n
\n );\n}\n\n```\nYou see `useForm` takes the name of your `input` and changes the object, so you only have to create one `useForm`.\nYou can have as many items in the object, and this \nallows many inputs, but with still **_one_** `useForm`.\nAnd it eliminates the use of a lambda function.\n\n[](https://codesandbox.io/s/m770pm84n8)\n\n### useTrafficLight\n___\n\n#### Before\n\n```jsx\nconst lightDurations = [5000, 4000, 1000];\n\nconst BeforeTrafficLight = ({ initialColor }) => {\n const [colorIndex, setColorIndex] = useState(initialColor);\n\n useEffect(\n () => {\n const timer = setTimeout(() => {\n setColorIndex((colorIndex + 1) % 3);\n }, lightDurations[colorIndex]);\n return () => clearTimeout(timer);\n },\n [colorIndex]\n );\n\n return (\n
\n );\n};\n```\n\n[](https://codesandbox.io/s/zqo981j4ym)\n\n## `useStep` (@next alpha only)\n\nThe new `useStep` is the new `useTrafficLight`, and is a more general step wizard.\n\n#### To install the alpha:\n```sh\n$ npm i react-hooks-helper@next\n```\n\n#### Usage\n\n```js\nconst {\n isPaused,\n index,\n step,\n navigation,\n} = useStep(config);\n```\n##### Config\n\nYou pass `useStep` a configuration object containing the following (\\* = required).\n\n| Key | Description |\n| :------------ |:------------- |\n| `steps`\\* | Either an array containing the steps to process or an integer specifying the number of steps. |\n| `initialStep` | The starting step—either a string id or an index. Default = 0. |\n| `autoAdvanceDuration` | If you wish the steps to auto-advance, specify the number of milliseconds. You can also include an `autoAdvanceDuration` in each `step` in your `steps` array, if you wish to have different durations for each step. |\n\n##### Return object\n\n| Key | Description |\n| :------------ |:------------- |\n| `index` | A number containing the current step index. |\n| `step` | The current `step` object from the `steps` array. |\n| `navigation` | A `navigation` object (see below). |\n| `isPaused` | `true` if the `autoAdvanceDuration` is paused. |\n| `autoAdvanceDuration` | Duration of the current auto-advance. |\n\n##### Navigation object\n\nThe `navigation` object returned from `useStep` contains control callback functions as follows.\n\n| Key | Description |\n| :------------ |:------------- |\n| `previous` | Call to navigate to the previous item index. Wraps from the first item to the last item. |\n| `next` | Call to navigate to the next item index. Wraps from the last item to the first item. |\n| `go` | Call to navigate to a specific step by `id` or by `index`. Example: `go(2)` or `go('billing-address')` |\n| `pause` | Pause auto-advance navigation. |\n| `play` | Play auto-advance navigation once it has been paused. |\n\n\n#### Live demo\n\nYou can view/edit the photo carousel on CodeSandbox.\n\n[](https://codesandbox.io/s/31228l0rnm)\n\n## My Coding Journey\n\nOn Dec 18, 2017, I did a talk at [ReactNYC](https://www.meetup.com/ReactNYC/) about the `useTrafficLight` code above, but it was the \"before\" code and did not use a custom hook, and _certainly_ not `react-hooks-helper` because it was not out yet! Here's my video.\n\n[](https://www.youtube.com/watch?v=mbiryVTIJ4Q&t=3s)\n\n\n## License\n\n**[MIT](LICENSE)** Licensed\n","readmeFilename":"README.md","gitHead":"2fdfdc56ceb5950ea98d27ea5544a69a6139bd2d","bugs":{"url":"https://github.com/revelcw/react-hooks-helper/issues"},"homepage":"https://github.com/revelcw/react-hooks-helper#readme","_id":"react-hooks-helper@1.3.0-alpha.3","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-Y1TQQhHntNUCDzE84N2L5Z9l2S9gWass7BYY4471rqWtiQWuLKsdPweoZS11YqrIRNo+dI4crNj8xXcnKm880w==","shasum":"f00132e7e1e2204da0afbdcc8510bf43325a0db5","tarball":"https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.3.0-alpha.3.tgz","fileCount":6,"unpackedSize":17298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLpI9CRA9TVsSAnZWagAAnxwP/RfzHPf13fdk4/fzs80+\n/azYOO6gliU1nug44n5EZTU1qR2xngISjZBqUImNhOWVcppVRPoj3dzuOyWh\nvdZvHVFRlTz3YUFT4qR2gREX/85XzBVlvGcrEaWSDFx6t+fzxPsJBe6envjB\nSaVdWnJHJKjx5stAgkoueEOSd3hh3wnbSJW/08ESB7oQpsoMD4S9a9CYdh8J\nP00mKX3EviGg+OP5FIZLLXQzYLbuNStJWZCBBzuoP+iSilph5GMmLIoFQlUz\nlLH52VI+ELe3WAbfRhQ3ZCHJWqvM7FJCGmDLTX+DeGxoK6VmWkwHnRs8JVjb\nj6GVLEiz7SAh8yLq2DlHwRX/LySuS8GY2HNGNmuMsRQM9JSV8u6Yii2ir9+S\njS2yhry6MUi25MaQJPg9d9/xWo0fmFLR1uyD2gQ/z/iBD6/z/lT64Zk3M8Fo\nd+zK8hvkW54PDh72BF9MjemXBlbVn8Xt8yLU1VLFeESCCXtwY9ApsZxsYreq\nkRlHLiwgl1vpzxozkf0ISSXv2bkaFiEDr0XX/cMtvaPohMPq2znvdJlRPBDF\nOTfGJ1cgAUxQcT6T/s72g1KfGH+zPr60Ufppqb81kgxpsXDwZl6w+TRKu98k\nh8SIwNpcSFNcBlTAKju3ojHLkDPUUbg5sgpDkwyq9b8nNXzkOgTdWMUfnt5s\nznI5\r\n=QVPE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEilPe7TRpNok6qIUUi+alJ8Rs3ImMsP5mfbLdwZMpW/AiEApPNuQnbB4x9tZEhRUdShV3MTj9dVO9olFenalVHhw50="}]},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hooks-helper_1.3.0-alpha.3_1546555964851_0.495853391631911"},"_hasShrinkwrap":false},"1.3.0-alpha.3.1":{"name":"react-hooks-helper","version":"1.3.0-alpha.3.1","description":"A custom React Hooks library that gives you custom hooks for your code.","main":"dist/react-hooks-helper.js","umd:main":"dist/react-hooks-helper.umd.js","module":"dist/react-hooks-helper.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/revelcw/react-hooks-helper.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib"],"author":{"name":"revelcw"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"16.7.0-alpha.2","react-dom":"16.7.0-alpha.2","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.7.0-alpha.2"},"gitHead":"0fbd01e5e6371c6abe99ec30de85d3dd77f8b49f","bugs":{"url":"https://github.com/revelcw/react-hooks-helper/issues"},"homepage":"https://github.com/revelcw/react-hooks-helper#readme","_id":"react-hooks-helper@1.3.0-alpha.3.1","_npmVersion":"6.5.0","_nodeVersion":"10.14.2","_npmUser":{"name":"revelcw","email":"revelcarlbergwest@gmail.com"},"dist":{"integrity":"sha512-4WFGsXHbWD/WikDTG8NhD30K74Pz8jCxyDPG+opGcs+i82UljpgG031JnShUyA0NIiKp/0Hg90XYqV+K+Vzidw==","shasum":"d74c68a3a7c6eee9eb9c1c294fe81ced287ec710","tarball":"https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.3.0-alpha.3.1.tgz","fileCount":6,"unpackedSize":17355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcMjYkCRA9TVsSAnZWagAArYgP/0r6+VVO/JWwVbxrigyD\nqUvUnPqeMVhEoMpKztyT34+S+FmtgIXVxXey2IkapfGG05XqNXX7DCOJFVAZ\nDyrrM/Qm1PB+JKIgHn1gbumh6brU0T5JkoGX0tXVo+GUZBzU5XSEaKAHx8CO\n+SfNe+XoNPPEO6iFgEzAl1+n+9Q7QKqEE/jLozBGM8TPbvR1m0arHDMOtfp7\n67bHNrbfSo0v07exn4UJGx2fZcoE47Iy3Oche/2HwEI8SjkTz/cxEgxa7wFz\n1LcBOoZvn8qZvLXQkg/o6nLX7uoKxYsUkVPpgi5vBaFFS6bVMu1x5zaZVWQl\np4jHQpH4Pl/oFYrlYnUMXCqUDQzof0SPZ0weOwUIZx9octEWJ2Dqs+0blwMm\njj4JXR+KUltGZtrmzc2EGALA5nVbKDhYmIUJirgriprQcW33lk2od4VPP96a\nuDvWyipLW33l9j9mWAuTR3dTFm//tqGEhDEHe3PryX1ttLU8qWW3vxzsE+gX\n/weGRDpjLXkvfR3/O9E4R7lJA/8ZVAB0PLy+p/Fpf7dXRDQwbSTzecVtsZEU\nCy8RIDA4J0ZFAe4B/4Bfmx6a2EXdVIZn7bIhmcbCyld6x0STz2yGIPCf+bGm\nHdvV/ML12ALdm/RKdXkUq6FqeOyHh3q62EVh04M1B8AlTY5q/N8GGuqDQMzG\n5mJQ\r\n=xbCO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICaFMdl8ibzUQRZQTcj0ATaHqphYDMkOQtFx2Pv08XkhAiBkiglVB4eN7eVWlehEEj/EZ8g6MHuKZ9MvIMIyKAyOOA=="}]},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hooks-helper_1.3.0-alpha.3.1_1546794532192_0.7451936462806745"},"_hasShrinkwrap":false},"1.4.0":{"name":"react-hooks-helper","version":"1.4.0","description":"A custom React Hooks library that gives you custom hooks for your code.","main":"dist/react-hooks-helper.js","umd:main":"dist/react-hooks-helper.umd.js","module":"dist/react-hooks-helper.m.js","source":"src/index.js","license":"MIT","scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib"],"author":{"name":"revelcw"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.8.3","react":"16.7.0-alpha.2","react-dom":"16.7.0-alpha.2","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.7.0-alpha.2"},"gitHead":"19975b609a29f82f1bbd7dfe7d51fc33ce1fd5e3","_id":"react-hooks-helper@1.4.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-dXwDEfA6azGjsA4Uy3xEtZDTfNHQajA3dJsH/u2tmGGbzy9Awf6v24QGSvatbOlgaiHQhRymhcMfTxAH+IAJNw==","shasum":"41304e0bce107c49f45a346560633046dda8a7a2","tarball":"https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.4.0.tgz","fileCount":6,"unpackedSize":11114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcMmiiCRA9TVsSAnZWagAAkjkP/jDLWA/KpG3JN3UE29fz\nH9z+bshR3gCmiwNF+l+5wWDyol42ZZ/kJC8OkATPm5Zc9/zuQjRrDRSa7fw9\njVxwJeVpJFTr5mW1Fm6R5twbTwIiSq2G3VrKSuHU4Ecc74SY0OipSZw/SkDZ\nucXA2qt3dhUsesWcs3Q+xwE6M2ffr1QalnwgbabWl54xwE/u+2FYm+vZYmS7\nBDE0A+U41vdW3LhaD1fFg6fEdLcJkjnIfzb2RJF3PooX8K0A83CHhmn14IJB\nzLHL+Lqjhl+wQZXRMhIuHOSqapaowIM2tGIX+I8Ou2LM/m1aofGgWadLvMiX\n8L1RIk2luaXqUFTnRTz2xvU7IsNaZPMtnDSMGBGo6Mu5hua0ONZ/6nlBhUNk\n0iGuRDPiIX9tdzhjEiBzVHfJ0SHDjP+HkCshwCVaDsUv5H37K3xrkRyGMOEX\nnAUlw7h1D195X6sv4upmtE5O/lzrHSspuridNK9glN9pThhGkBlLqTkMUOww\nnz25pRRlHyrlhjbotJRA1rTH5hGbsBrF1ntjXQcjmsuXZ2/oJV9yXcierVyn\nlsJ2/ylUtY1KYvAexbqciU68Kq78jo7ktyCa0zsdnNxSK3kEzjHetmpFECPW\nnVuZeqSs5IBTs+kjBmLOaOqxElqn8CucNm1ykVz8AwBuIlBxsZki3/ao+SQ1\ndQ6n\r\n=2RqY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGGlCOpWBOJHMCCK9jUULA3ebwm2l8IyLmMCODPZHy5NAiEA0WPoqBDiSjdGbxCDAk2hqxygYIpY1YAFpWsqRgInU7Q="}]},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hooks-helper_1.4.0_1546807458335_0.707449296952825"},"_hasShrinkwrap":false},"1.4.1":{"name":"react-hooks-helper","version":"1.4.1","description":"A custom React Hooks library that gives you custom hooks for your code.","main":"dist/react-hooks-helper.js","umd:main":"dist/react-hooks-helper.umd.js","module":"dist/react-hooks-helper.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/revelcw/react-hooks-helper.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib"],"author":{"name":"revelcw"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.8.3","react":"16.7.0-alpha.2","react-dom":"16.7.0-alpha.2","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.7.0-alpha.2"},"gitHead":"006caf2754af43f71c610e98249a650c39c79b34","bugs":{"url":"https://github.com/revelcw/react-hooks-helper/issues"},"homepage":"https://github.com/revelcw/react-hooks-helper#readme","_id":"react-hooks-helper@1.4.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-OLHWBEhZaYKbUGqzGpvEdZ+z8So3qHiF3+bzxzLYeATN8aBF7IZs7o7ACbG93KruD0fW8BPbvk4ON1qzekwVQA==","shasum":"00118257bafdeb4ddd94533fcc5b0c07d0deb4d0","tarball":"https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.4.1.tgz","fileCount":6,"unpackedSize":11219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcMmv/CRA9TVsSAnZWagAAr4MQAIKwa4eNfmWp2L7toQw+\n8SONcgTsebGddCJ3il4/FUmpVlV4I5BeH5Wp9FVLQ2I/bWQGf8yjK+0xiVFi\nSD9QMFX5oVDJqXv1njrkF/ltnvuy2+k8b/3KpInDGQN83cFiVewlGZ+QMMTv\nGDomH2yiI+vkUsOE14QPFRH2kELczG+2nEGU+tD3aCftFuI2r+akgZV2pyfd\nru5A4j1UW/7GB/gRbfHX6e1uF0iSoSo9VEKwv6EhXcXbJBH8aB1riFqf+lA1\nKo5TeZZCXZSBsXGm55ZlA6w6sVVHAGkMPLs3AI2QdZKYDCqv/dLf9oacv73E\n7oM/G5U4R8SsSPf4OOihVzj4G9Hwryuj9nEFTwbylHRAnWbTEMg9oXgST4Co\nUt+OUPqJwzRC3cZWBQueLSxui0TsNUmmOiwRAS3yfjK+Pff2FU5iOB+4gDuq\nig0Htvma/lv6cE8TZEMhYZZFW+5hZBZA+MgUkgeLhivr4oURfdUOHQEH5ifM\niB2g6nZpUjVE6JzxdEv1PzCWk5uaAwkGZ5xVzuYy8xC0/MwBbCEPT5oSCtl3\nulPyidJAQOSDmh+VDLqj3XY65AjB4Yk9dPADebOUjtj8+C3eJ3ZDSVeYgv3Y\nzjeOPcffS+uyIXJCEL6/VS/+n8dqXF8FrI4fcUGqfBxaJ+rTyw5Kycq38Jzi\n1L7Z\r\n=YLIH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFR206mCvz6VfoWB6DfHaerwZ2zNdD8diDwt6vU7jCF+AiA3P4CQES/KB2/7ScOm9wYhi2myP2VyLIP/SX6+ipexJw=="}]},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hooks-helper_1.4.1_1546808318944_0.8268086429777382"},"_hasShrinkwrap":false},"1.5.0-alpha.0":{"name":"react-hooks-helper","version":"1.5.0-alpha.0","description":"A custom React Hooks library that gives you custom hooks for your code.","main":"dist/react-hooks-helper.js","umd:main":"dist/react-hooks-helper.umd.js","module":"dist/react-hooks-helper.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/revelcw/react-hooks-helper.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib"],"author":{"name":"revelcw"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"16.8.0-alpha.0","react-dom":"16.8.0-alpha.0","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0-alpha.0"},"readme":"# react-hooks-helper\n\nA custom [React Hooks](https://reactjs.org/docs/hooks-overview.html) library that gives you custom\nhooks for your code.\n\n[](https://badge.fury.io/js/react-hooks-helper)\n\n\n\n## Requirement ⚠️\n\nTo use `react-hook-lib`, you must use `react@16.8.0-alpha.0`. React Hooks is currently at\n**[RFC](https://github.com/reactjs/rfcs/pull/68)** stage.\n\n## Installation\n\n```sh\n$ npm i react-hooks-helper\n```\n\n## Usage\n\n```js\nconst [bar, notBar] = useNot(bool);\nconst [{ foo, bar }, setForm] = useForm({ foo, bar });\nconst currentValue = useTrafficLight(initialIndex, durations);\n```\n\n## Examples\n\n### useNot\n\n`useNot` is a toggle function for react apps.\n\n---\n\nHere is a simple App that toggles a value to produce either a **blue** or a **red** square.\n\n#### Before\n\n```jsx\nfunction App() {\n const [value, setValue] = useState(false);\n return (\n (\n setValue( !value )\n )}\n style={{\n width: 100,\n height: 100,\n backgroundColor: value ? 'red' : 'blue'\n }}\n />\n );\n```\n\n#### After\n\n```jsx\nfunction App() {\n const [value, notValue] = useNot(false);\n return (\n \n );\n}\n```\n\n`value`, a boolean, is a variable. `notValue`function that nots the value from `true` to `false` and\nvise versa. Notice the `notValue` is not a lambda function, like in the **[before](#useNotBefore)**\n\n[](https://codesandbox.io/s/rwk86po7rn)\n\n### useForm\n\n`useForm` is for an advanced search, sign-up form, etc, something with a lot of text felds, because\nyou only need to use one hook. Wereas on the otherwise you would need many `useState` hooks.\n\n---\n\n#### Before\n\nRight here is some code for a sign-up form. As you can see it is using two `useState` hooks and we\nneed a lambda function to change it.\n\n```jsx\nfunction App() {\n const [firstName, setFirstName] = useState('');\n const [lastName, setLastName] = useState('');\n const [gender, setGender] = useState('Male');\n const [isAccept, setAcceptToC] = useState(false);\n return (\n
\n );\n}\n```\n\nYou see `useForm` takes the name of your `input` and changes the object, so you only have to create\none `useForm`. You can have as many items in the object, and this allows many inputs, but with still\n**_one_** `useForm`. And it eliminates the use of a lambda function.\n\n[](https://codesandbox.io/s/m770pm84n8)\n\n### useTrafficLight\n\n---\n\n#### Before\n\n```jsx\nconst lightDurations = [5000, 4000, 1000];\n\nconst BeforeTrafficLight = ({ initialColor }) => {\n const [colorIndex, setColorIndex] = useState(initialColor);\n\n useEffect(\n () => {\n const timer = setTimeout(() => {\n setColorIndex((colorIndex + 1) % 3);\n }, lightDurations[colorIndex]);\n return () => clearTimeout(timer);\n },\n [colorIndex]\n );\n\n return (\n
\n );\n};\n```\n\n[](https://codesandbox.io/s/zqo981j4ym)\n\n## `useStep` (@next alpha only)\n\nThe new `useStep` is the new `useTrafficLight`, and is a more general step wizard.\n\n#### To install the alpha:\n\n```sh\n$ npm i react-hooks-helper@next\n```\n\n#### Usage\n\n```js\nconst { isPaused, index, step, navigation } = useStep(config);\n```\n\n##### Config\n\nYou pass `useStep` a configuration object containing the following (\\* = required).\n\n| Key | Description |\n| :-------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `steps`\\* | Either an array containing the steps to process or an integer specifying the number of steps. |\n| `initialStep` | The starting step—either a string id or an index. Default = 0. |\n| `autoAdvanceDuration` | If you wish the steps to auto-advance, specify the number of milliseconds. You can also include an `autoAdvanceDuration` in each `step` in your `steps` array, if you wish to have different durations for each step. |\n\n##### Return object\n\n| Key | Description |\n| :-------------------- | :------------------------------------------------ |\n| `index` | A number containing the current step index. |\n| `step` | The current `step` object from the `steps` array. |\n| `navigation` | A `navigation` object (see below). |\n| `isPaused` | `true` if the `autoAdvanceDuration` is paused. |\n| `autoAdvanceDuration` | Duration of the current auto-advance. |\n\n##### Navigation object\n\nThe `navigation` object returned from `useStep` contains control callback functions as follows.\n\n| Key | Description |\n| :--------- | :----------------------------------------------------------------------------------------------------- |\n| `previous` | Call to navigate to the previous item index. Wraps from the first item to the last item. |\n| `next` | Call to navigate to the next item index. Wraps from the last item to the first item. |\n| `go` | Call to navigate to a specific step by `id` or by `index`. Example: `go(2)` or `go('billing-address')` |\n| `pause` | Pause auto-advance navigation. |\n| `play` | Play auto-advance navigation once it has been paused. |\n\n#### Live demo\n\nYou can view/edit the photo carousel on CodeSandbox.\n\n[](https://codesandbox.io/s/31228l0rnm)\n\n## My Coding Journey\n\nOn Dec 18, 2017, I did a talk at [ReactNYC](https://www.meetup.com/ReactNYC/) about the\n`useTrafficLight` code above, but it was the \"before\" code and did not use a custom hook, and\n_certainly_ not `react-hooks-helper` because it was not out yet! Here's my video.\n\n[](https://www.youtube.com/watch?v=mbiryVTIJ4Q&t=3s)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n","readmeFilename":"README.md","gitHead":"40153561bc6482d8c3542a4ffc5fa612137ce4c0","bugs":{"url":"https://github.com/revelcw/react-hooks-helper/issues"},"homepage":"https://github.com/revelcw/react-hooks-helper#readme","_id":"react-hooks-helper@1.5.0-alpha.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-dTMOnSLqc3NUpJ9QE24Nj1Q+/4dx9Up2ZFDtw6TmuJcms6QMCGb39/Ck4nJz7soa0R3JnTG+f0VjZaIRJ8ipiA==","shasum":"f4dfd0c1168347e45a796bc4df61c4daa797142d","tarball":"https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.5.0-alpha.0.tgz","fileCount":6,"unpackedSize":18802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNzQhCRA9TVsSAnZWagAA+pUP/R8rZeUdHDe4e3BERr+m\nbwYEeIRUmDR4E+fLiw5JXlfY+/1yE5HAupaepeSNxBCI+bqhmiGtHINpH7Ol\nmBFaSxdT84alce0sfz6MO333vr5Vi8hbSdYXL9ZYnjDhtrVY8HPBQo4slItg\nr3wGrpNpcLyCtypA+rNWsFRnTKWuYJgL2a3eNny5fwobtBo580Xo9t4g4/VD\nlmu8xYGv+wAdPc1nTzmb892JyBgj9f3fJaG3nyAGEoFxk9+xVmtrf0GV2yah\nbDbc8oshY+T+1LK7tJCA9Haw/6IqER6XX7/KyUj6P4eLaGY3QwpDqUf/bfrO\n/Bu1AB7C8Nu29olShv7pZFmZFriybyN7u1Tam2hShTxClU4ZK8PvW0umvEIv\n0UjIgoW3/8pcv2FR/6miv+IZfwqUoG+oFN2clJR4+fjxsswUs0agYMo7NPYT\n4M32uOXgXxTDX+rb7fAY86Hoy3ZMNjqUNCeBjiBMcvyj69H32eF3sWkarCMd\n9odtP/P48wY1/bwMDrtfgyIzqMCa5YiUGES6dzTAcWU5PvqOwq3giFfq/IQh\nZp2GT+Fez/1rK3OuCQgM2IT4IjQ+oqcPZmHAAA9xxrzSX2Ant4PcbyCghkJh\nieEGr+b0WmulEpZlmmXUJklFdb963w0umQV1U9do9/5Xj8bERELkgFexFHne\njMkq\r\n=j2C7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFo6z8JzTn0JgYE+VercSU2vSDfv2u+Ofh61s7Z7l52TAiEAxhtBs/Qx5GHTJIMgkMh1T/6L6ZaWdrZJ+tO/NPxnb80="}]},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hooks-helper_1.5.0-alpha.0_1547121696406_0.8192327150106715"},"_hasShrinkwrap":false},"1.5.0-alpha.1":{"name":"react-hooks-helper","version":"1.5.0-alpha.1","description":"A custom React Hooks library that gives you custom hooks for your code.","main":"dist/react-hooks-helper.js","umd:main":"dist/react-hooks-helper.umd.js","module":"dist/react-hooks-helper.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/revelcw/react-hooks-helper.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib"],"author":{"name":"revelcw"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"16.8.0-alpha.0","react-dom":"16.8.0-alpha.0","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0-alpha.0"},"readme":"# react-hooks-helper\n\nA custom [React Hooks](https://reactjs.org/docs/hooks-overview.html) library that gives you custom\nhooks for your code.\n\n[](https://badge.fury.io/js/react-hooks-helper)\n\n\n\n## Requirement ⚠️\n\nTo use `react-hook-lib`, you must use `react@16.8.0-alpha.0`. React Hooks is currently at\n**[RFC](https://github.com/reactjs/rfcs/pull/68)** stage.\n\n## Installation\n\n```sh\n$ npm i react-hooks-helper\n```\n\n## Usage\n\n```js\nconst [bar, notBar] = useNot(bool);\nconst [{ foo, bar }, setForm] = useForm({ foo, bar });\nconst currentValue = useTrafficLight(initialIndex, durations);\n```\n\n## Examples\n\n### useNot\n\n`useNot` is a toggle function for react apps.\n\n---\n\nHere is a simple App that toggles a value to produce either a **blue** or a **red** square.\n\n#### Before\n\n```jsx\nfunction App() {\n const [value, setValue] = useState(false);\n return (\n (\n setValue( !value )\n )}\n style={{\n width: 100,\n height: 100,\n backgroundColor: value ? 'red' : 'blue'\n }}\n />\n );\n```\n\n#### After\n\n```jsx\nfunction App() {\n const [value, notValue] = useNot(false);\n return (\n \n );\n}\n```\n\n`value`, a boolean, is a variable. `notValue`function that nots the value from `true` to `false` and\nvise versa. Notice the `notValue` is not a lambda function, like in the **[before](#useNotBefore)**\n\n[](https://codesandbox.io/s/rwk86po7rn)\n\n### useForm\n\n`useForm` is for an advanced search, sign-up form, etc, something with a lot of text felds, because\nyou only need to use one hook. Wereas on the otherwise you would need many `useState` hooks.\n\n---\n\n#### Before\n\nRight here is some code for a sign-up form. As you can see it is using two `useState` hooks and we\nneed a lambda function to change it.\n\n```jsx\nfunction App() {\n const [firstName, setFirstName] = useState('');\n const [lastName, setLastName] = useState('');\n const [gender, setGender] = useState('Male');\n const [isAccept, setAcceptToC] = useState(false);\n return (\n
\n );\n}\n```\n\nYou see `useForm` takes the name of your `input` and changes the object, so you only have to create\none `useForm`. You can have as many items in the object, and this allows many inputs, but with still\n**_one_** `useForm`. And it eliminates the use of a lambda function.\n\n[](https://codesandbox.io/s/m770pm84n8)\n\n### useTrafficLight\n\n---\n\n#### Before\n\n```jsx\nconst lightDurations = [5000, 4000, 1000];\n\nconst BeforeTrafficLight = ({ initialColor }) => {\n const [colorIndex, setColorIndex] = useState(initialColor);\n\n useEffect(\n () => {\n const timer = setTimeout(() => {\n setColorIndex((colorIndex + 1) % 3);\n }, lightDurations[colorIndex]);\n return () => clearTimeout(timer);\n },\n [colorIndex]\n );\n\n return (\n
\n );\n};\n```\n\n[](https://codesandbox.io/s/zqo981j4ym)\n\n## `useStep` (@next alpha only)\n\nThe new `useStep` is the new `useTrafficLight`, and is a more general step wizard.\n\n#### To install the alpha:\n\n```sh\n$ npm i react-hooks-helper@next\n```\n\n#### Usage\n\n```js\nconst { isPaused, index, step, navigation } = useStep(config);\n```\n\n##### Config\n\nYou pass `useStep` a configuration object containing the following (\\* = required).\n\n| Key | Description |\n| :-------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `steps`\\* | Either an array containing the steps to process or an integer specifying the number of steps. |\n| `initialStep` | The starting step—either a string id or an index. Default = 0. |\n| `autoAdvanceDuration` | If you wish the steps to auto-advance, specify the number of milliseconds. You can also include an `autoAdvanceDuration` in each `step` in your `steps` array, if you wish to have different durations for each step. |\n\n##### Return object\n\n| Key | Description |\n| :-------------------- | :------------------------------------------------ |\n| `index` | A number containing the current step index. |\n| `step` | The current `step` object from the `steps` array. |\n| `navigation` | A `navigation` object (see below). |\n| `isPaused` | `true` if the `autoAdvanceDuration` is paused. |\n| `autoAdvanceDuration` | Duration of the current auto-advance. |\n\n##### Navigation object\n\nThe `navigation` object returned from `useStep` contains control callback functions as follows.\n\n| Key | Description |\n| :--------- | :----------------------------------------------------------------------------------------------------- |\n| `previous` | Call to navigate to the previous item index. Wraps from the first item to the last item. |\n| `next` | Call to navigate to the next item index. Wraps from the last item to the first item. |\n| `go` | Call to navigate to a specific step by `id` or by `index`. Example: `go(2)` or `go('billing-address')` |\n| `pause` | Pause auto-advance navigation. |\n| `play` | Play auto-advance navigation once it has been paused. |\n\n#### Live demo\n\nYou can view/edit the photo carousel on CodeSandbox.\n\n[](https://codesandbox.io/s/31228l0rnm)\n\n## My Coding Journey\n\nOn Dec 18, 2017, I did a talk at [ReactNYC](https://www.meetup.com/ReactNYC/) about the\n`useTrafficLight` code above, but it was the \"before\" code and did not use a custom hook, and\n_certainly_ not `react-hooks-helper` because it was not out yet! Here's my video.\n\n[](https://www.youtube.com/watch?v=mbiryVTIJ4Q&t=3s)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n","readmeFilename":"README.md","gitHead":"006caf2754af43f71c610e98249a650c39c79b34","bugs":{"url":"https://github.com/revelcw/react-hooks-helper/issues"},"homepage":"https://github.com/revelcw/react-hooks-helper#readme","_id":"react-hooks-helper@1.5.0-alpha.1","_npmVersion":"6.5.0","_nodeVersion":"10.14.2","_npmUser":{"name":"revelcw","email":"revelcarlbergwest@gmail.com"},"dist":{"integrity":"sha512-wBy1+5tbtNi0d/elKPz3HQELsifJlAvE2H8Uw4SviMhJis81bVV+nCv3zU/4NAqBeYMCoU2v4LVToRK8shbPRA==","shasum":"84e16e0e4f43b30cb7d15076e878a895c841294b","tarball":"https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.5.0-alpha.1.tgz","fileCount":21,"unpackedSize":104528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOlmtCRA9TVsSAnZWagAAkZQP/j8eXzK/vPg5JGRyd1Db\nm3tS631oV54WGfhkM2gRHXDVQ8Zyx6eHODGL07IvPpxjKRoxaRe0Pirh/A5P\nfl0C5NvDJoiv54XcY6r7ebsVFgzwJGYd+2rde1aWrOIPGCwS4nHLgnJbFzL2\nHJTYyZwHhuq/F10HxDGhcp/1bVRTbZJJ8wibA+EG1ixltYGEFV8iyPAShaUS\nZJHFIpOcQsEIc93VEz6udAjfxSChiEib4+LOVZE5nTkiS5xYK2mef4Z8rZ6c\nl/Vj06DKcK7Ykk8PXm7wx48MAhJuLlWo05BuPWH6T/71yMSsJNaXoAGpy2DK\nowrYHnuaplr9YXYKCK9FppXOu0nkox7uzqbUtPgcaf/Cfatfo3YulwSxxIVD\n/YxF7QY2VFG5t0ruJAHxtSTbQYmwfCXl5uztd5QKNhOvHX5lsSThtbpqUXcs\nTHLjHesh2r6QXXyLpMzG5RWTpIfwtw5JBzLsK/wYsrAq1YCXiU5ZpIpWCggk\n5O+S5BUHMsSB9GJHNKYI9VsCogKRyQSDNfTKTG7wm+JAexHRhzs/YO9IvGqw\nGJK37wv+FVZXQrU/U0chqdrPgamIDNY5+WXk8kCTC7Ub3P1ooAqacLeBML5D\nVBdJXSK/5dxdfnWvj00BmZfqoW/ERmom8o9Vm6exLv5zhmMFoFWdMs7lcJ36\n0s4T\r\n=TsNg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG3nyMYU4VmkNeZpz/eiJjNkJ6YsqHxZxideNzkD9jcLAiBv0gtGKyYOHGggggu/+tWrHQa33mWZ7j+viC7g75s/fg=="}]},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hooks-helper_1.5.0-alpha.1_1547327916332_0.37541843802255404"},"_hasShrinkwrap":false},"1.5.0":{"name":"react-hooks-helper","version":"1.5.0","description":"A custom React Hooks library that gives you custom hooks for your code.","main":"dist/react-hooks-helper.js","umd:main":"dist/react-hooks-helper.umd.js","module":"dist/react-hooks-helper.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/revelcw/react-hooks-helper.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","form","step","wizard"],"author":{"name":"revelcw"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"16.8.0-alpha.0","react-dom":"16.8.0-alpha.0","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0-alpha.0"},"gitHead":"9e633c48d14d183253d71ac40b286b184f275c1e","bugs":{"url":"https://github.com/revelcw/react-hooks-helper/issues"},"homepage":"https://github.com/revelcw/react-hooks-helper#readme","_id":"react-hooks-helper@1.5.0","_nodeVersion":"10.15.0","_npmVersion":"6.6.0","dist":{"integrity":"sha512-cXd/oyL3Y8tADw2zGhT4wXJEkdc2TNnHRaY716nee4P+AYFZpstnPlVOeOvy5yu+2IvksdnIHqL6J48PbCZZHQ==","shasum":"86aaf751d2672bf0b3d02e8315c2a93f4d36b3ab","tarball":"https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.5.0.tgz","fileCount":6,"unpackedSize":18676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcRKIDCRA9TVsSAnZWagAArFEP/1z7AVwmih5NdTBZgYMF\naL7ODT/n4pijKYn8Cel4X39v0/ZFh5L4WE7XyD7ckcnRY+aAsMAR4fj3HPx7\ncVdycgjjY7AADrEpAism7DXyCaHtPrBerETfjvR9ED1Y6gODutcV80gv4oIh\n10yX3rfpYJMjHpV+JkL8R6P565yq1w0thPv2SoBkz3uXNnXEjSl3S1OPA7mH\nlfsFwQSI1Q6Ne8jFgKDroPBJCFDvzGZ+t1HjgC0rrA3UakfuHDsRtWs2jKeH\nx1W5OfxLzuckKknqa8RfEA/WlBDSuWN9t6Cdhg6se1QV6KpAxKI9xUihORer\nqa4A8KHdCfSg+uPLvdiYBGXAzzBCdzfoZ82A0loDgS5ugSk4OThS8poMgGNy\nPVrlcE+01aJKUYST9i21Nr4oJFwxMWSpgcgCmwuyl5X7Anx3nDsa8zeDJGRX\ndBSd8DvNACYeY/wwfMMQGhqh54Yt4dvPV3uUVgek4WLPxYgKur22BEKIcGOo\nohNx6/ykEZMHPaE4utk/RiKJvO5YdzfVzo/8FgfXT3p3ggCo5f0+jCpXhPwU\nSo9I/SH4pR1pVjwi4cu+tva7ex9IsMXcO+HKANJGLmqZ3kWyU0cu14PUmo1A\nKkJTbWv5U0vmYfkyRqyaRRsIdFjOa2scefDDFymtdIWFXalOB4ByoDQR0sWE\naLS+\r\n=Ensd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBEiygIuk0R65oDw0V+87q3kkiM+2QpS+4dlHA4uCk4AIhAOXBToC8nx467R+JtbqhX/z/96Uux39VYpaCkcOKhLvF"}]},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hooks-helper_1.5.0_1548001794700_0.6338934546417883"},"_hasShrinkwrap":false},"1.6.0":{"name":"react-hooks-helper","version":"1.6.0","description":"A custom React Hooks library that gives you custom hooks for your code.","main":"dist/react-hooks-helper.js","umd:main":"dist/react-hooks-helper.umd.js","module":"dist/react-hooks-helper.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/revelcw/react-hooks-helper.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","form","step","wizard"],"author":{"name":"revelcw"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.3","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"gitHead":"e5bf42fcfdc601515781137fd754b7cf11acf12e","bugs":{"url":"https://github.com/revelcw/react-hooks-helper/issues"},"homepage":"https://github.com/revelcw/react-hooks-helper#readme","_id":"react-hooks-helper@1.6.0","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-DlyWQ99tgwyDdJfTihCXT6AftYymxhA2LS60vBCTOpclmjPxqDwDTLjVK0kbIc3XsgJvxkanW8TwHE0jrIB8hA==","shasum":"d4105f8745471600b38dc450260d513553c883b1","tarball":"https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.6.0.tgz","fileCount":7,"unpackedSize":20616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWzAVCRA9TVsSAnZWagAAU20P/0kTD/E7o3qfcPb6ppB/\n8BFflMb/ywQYE03+nnqXe0CHopsrrHXtYAkxIgMvQTQPyDYGrvXhDFbYdH5H\nH6x3sBT/5K9PGYRCgccO942kuyUZD0OiWTqWiw+QJhl9GJBJS5NEifz+uqZW\npIPXtNnRxfCErYX54uDp8ebdMuV+NXz9sCcFnScuwJBXdmnhF6obA6lZf/6e\nDvMcUsbGYXVeFZ7zjtvKhEoNMZc3wJAgfpPO15WJCMF9feM8OaPX2oDr0AzD\npBH9WTzbTPh01Tf+Mfi6EKfpfDjpacSe+ywKr8/gHiuqSJUMPnh/PpkCsEEk\n6iM5lVzN+YPSNRO6XQkEBSsdnEsCkC1TEx1tu5TnvD40fEp+dqvSl306W97c\nwjaUadYZQrus95KlFf3ddrM0UhfWrGhwiBQoWHbEWtMr4qNw5PNsDOkt8kUF\nMlI4Hzfm02GVcZNbwl/AYxTaZwlPIgpIn+al2sagFH8X8I2dU+9aqBRdbvf3\nwCpmEDNW8Vwtr+i6CofVBOXgOaowvWl8GjpNFpdOHbuZBqs/aCCQSgOyelAN\nqtJ1RcgJBk+qv5JcL/bsdARyivmb3A6U8T/fM8QPO5mT/7tqvPmJxdyAA7Kb\nOSqP9ATEQU39wLYMW4aF4Abyk2hNg6spJADqDfioCF+uh7TJkKrRkgK7oUYI\nUVeT\r\n=H+lg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID6aCBGFRlj/J++FdfW7szbVKGlW+pyXXiGTeYmrKdPdAiEAz24lPaORyiF2owuEHZFzwcbEVko/uRSKM8P6QOwNnhw="}]},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hooks-helper_1.6.0_1549479956325_0.7937305735785787"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-15T15:23:54.241Z","0.0.0":"2018-12-15T15:23:54.404Z","modified":"2022-05-14T12:14:41.267Z","0.0.1":"2018-12-21T20:59:16.062Z","0.0.2":"2018-12-28T23:27:41.136Z","0.0.3":"2018-12-28T23:45:28.789Z","0.0.4":"2018-12-28T23:56:55.853Z","0.1.0":"2018-12-29T14:00:04.429Z","0.1.1":"2018-12-29T15:50:20.218Z","1.0.0":"2018-12-29T15:53:14.215Z","1.0.1":"2018-12-29T19:30:29.093Z","1.1.0":"2018-12-29T23:33:29.932Z","1.1.1":"2018-12-30T17:27:42.558Z","1.1.2":"2018-12-30T17:34:01.740Z","1.1.4":"2019-01-01T20:12:33.120Z","1.2.0":"2019-01-01T21:28:55.584Z","1.2.1":"2019-01-01T21:31:44.274Z","1.3.0-alpha.0":"2019-01-02T23:50:29.647Z","1.3.0-alpha.1":"2019-01-03T13:04:57.901Z","1.3.0-alpha.2":"2019-01-03T18:51:14.677Z","1.3.0-alpha.3":"2019-01-03T22:52:44.963Z","1.3.0-alpha.3.1":"2019-01-06T17:08:52.300Z","1.4.0":"2019-01-06T20:44:18.460Z","1.4.1":"2019-01-06T20:58:39.114Z","1.5.0-alpha.0":"2019-01-10T12:01:36.563Z","1.5.0-alpha.1":"2019-01-12T21:18:36.448Z","1.5.0":"2019-01-20T16:29:54.829Z","1.6.0":"2019-02-06T19:05:56.471Z"},"maintainers":[{"name":"revelcw","email":"revelcarlbergwest@gmail.com"}],"license":"MIT","readme":"# react-hooks-helper\n\nA custom [React Hooks](https://reactjs.org/docs/hooks-overview.html) library that gives you custom\nhooks for your code.\n\n[](https://badge.fury.io/js/react-hooks-helper)\n\n\n\n>🧙 `useStep` is a multi-purpose step wizard. Build an image carousel!\n>\n>📋 `useForm` for dead simple form control with nested object support.\n>\n>🚦 `useTrafficLight` easily build a fun traffic light component.\n>\n>‼ `useNot` to simplify toggling `true` / `false` without lambda functions.\n>\n> 🐐 Full 100% test coverage!\n>\n>🔥 Blazing fast!\n\n## Requirement ⚠️\n\nTo use `react-hooks-helper`, you must use `react@16.8.0-alpha.0`. React Hooks is currently at\n**[RFC](https://github.com/reactjs/rfcs/pull/68)** stage.\n\n## Installation\n\n```sh\n$ npm i react-hooks-helper\n```\n\n## Usage\n\n```js\nconst { isPaused, index, step, navigation } = useStep(config);\nconst [{ foo, bar }, setForm] = useForm({ foo, bar });\nconst currentValue = useTrafficLight(initialIndex, durations);\nconst [bar, notBar] = useNot(bool);\n```\n\n## Examples\n\n### useStep\n\nThe new `useStep` Hook is the new `useTrafficLight` and is a more general step wizard.\nYou can use it to simplify many tasks, such as a multi-page input form, or an image carousel.\n\nIt has an auto advance function, or control manually by calling `previous` and/or `next`.\n\n#### Usage\n\n```js\nconst { isPaused, index, step, navigation } = useStep(config);\n```\n\n#### Config\n\nYou pass `useStep` a configuration object containing the following (\\* = required).\n\n| Key | Description |\n| :-------------------- | :------------------------------------------------------------------ |\n| `steps`\\* | Either an array containing the steps to process or an integer specifying the number of steps. |\n| `initialStep` | The starting step—either a string id or an index. Default = 0. |\n| `autoAdvanceDuration` | If you wish the steps to auto-advance, specify the number of milliseconds. You can also include an `autoAdvanceDuration` in each `step` in your `steps` array, if you wish to have different durations for each step. |\n\n#### Return object\n\n| Key | Description |\n| :-------------------- | :------------------------------------------------ |\n| `index` | A number containing the current step index. |\n| `step` | The current `step` object from the `steps` array. |\n| `navigation` | A `navigation` object (see below). |\n| `isPaused` | `true` if the `autoAdvanceDuration` is paused. |\n| `autoAdvanceDuration` | Duration of the current auto-advance. |\n\n#### Navigation object\n\nThe `navigation` object returned from `useStep` contains control callback functions as follows.\n\n| Key | Description |\n| :--------- | :----------------------------------------------------------------------------------------------------- |\n| `previous` | Call to navigate to the previous item index. Wraps from the first item to the last item. |\n| `next` | Call to navigate to the next item index. Wraps from the last item to the first item. |\n| `go` | Call to navigate to a specific step by `id` or by `index`. Example: `go(2)` or `go('billing-address')` |\n| `pause` | Pause auto-advance navigation. |\n| `play` | Play auto-advance navigation once it has been paused. |\n\n#### Example\n\nThere's a simple multi-step control with 3 \"pages\".\nYou use the \"Previous\" and \"Next\" buttons to navigate.\n\n```js\nfunction App() {\n const {\n index,\n navigation: { previous, next }\n } = useStep({ steps: 3 });\n return (\n
\n
Hello CodeSandbox
\n\n {index === 0 &&
This is step 1
}\n {index === 1 &&
This is step 2
}\n {index === 2 &&
This is step 3
}\n\n
\n \n \n
\n
\n );\n}\n```\n\n#### Live demo\n\nYou can view/edit a photo carousel on CodeSandbox.\nIt automatically advances after 5 seconds. You can also click previous/next, or\nnavigate directly to a particular image.\n\n[](https://codesandbox.io/s/31228l0rnm)\n\n\n[](https://codesandbox.io/s/31228l0rnm)\n\n### useForm\n\n`useForm` is for an advanced search, sign-up form, etc, something with a lot of text felds, because\nyou only need to use one hook. Wereas on the otherwise you would need many `useState` hooks.\n\n---\n\n#### Before\n\nRight here is some code for a sign-up form. As you can see it is using two `useState` hooks and we\nneed a lambda function to change it.\n\n```jsx\nfunction App() {\n const [firstName, setFirstName] = useState('');\n const [lastName, setLastName] = useState('');\n const [gender, setGender] = useState('Male');\n const [isAccept, setAcceptToC] = useState(false);\n return (\n
\n );\n}\n```\n\nYou see `useForm` takes the name of your `input` and changes the object, so you only have to create\none `useForm`. You can have as many items in the object, and this allows many inputs, but with still\n**_one_** `useForm`. And it eliminates the use of a lambda function.\n\n#### Nest objects\n\n`useForm` also supports nested objects. This is useful for things like `billing.city` and `shipping.city`.\n\nIn your markup, you simply add the dots in the `name` field like this.\n\n```html\n\n```\n\n#### Live demo\n\n[](https://codesandbox.io/s/m770pm84n8)\n\n### useTrafficLight\n\n---\n\n#### Before\n\n```jsx\nconst lightDurations = [5000, 4000, 1000];\n\nconst BeforeTrafficLight = ({ initialColor }) => {\n const [colorIndex, setColorIndex] = useState(initialColor);\n\n useEffect(\n () => {\n const timer = setTimeout(() => {\n setColorIndex((colorIndex + 1) % 3);\n }, lightDurations[colorIndex]);\n return () => clearTimeout(timer);\n },\n [colorIndex]\n );\n\n return (\n
\n );\n};\n```\n\n#### Live demo\n\n[](https://codesandbox.io/s/zqo981j4ym)\n\n### useNot\n\n`useNot` is a toggle function for React components.\n\n---\n\nHere is a simple App that toggles a value to produce either a **blue** or a **red** square.\n\n#### Before\n\n```jsx\nfunction App() {\n const [value, setValue] = useState(false);\n return (\n (\n setValue( !value )\n )}\n style={{\n width: 100,\n height: 100,\n backgroundColor: value ? 'red' : 'blue'\n }}\n />\n );\n```\n\n#### After\n\n```jsx\nfunction App() {\n const [value, notValue] = useNot(false);\n return (\n \n );\n}\n```\n\n`value`, a boolean, is a variable. `notValue`function that nots the value from `true` to `false` and\nvise versa. Notice the `notValue` is not a lambda function, like in the **[before](#useNotBefore)**\n\n#### Live demo\n\n[](https://codesandbox.io/s/rwk86po7rn)\n\n## My Coding Journey\n\nOn Dec 18, 2017, I did a talk at [ReactNYC](https://www.meetup.com/ReactNYC/) about the\n`useTrafficLight` code above, but it was the \"before\" code and did not use a custom hook, and\n_certainly_ not `react-hooks-helper` because it was not out yet!\n\nHere's my video.\n\n[](https://www.youtube.com/watch?v=mbiryVTIJ4Q&t=3s)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n## Code in the wild\n\nHave you built an app (real or sample) using `react-hooks-helper`? Make a PR and add it to the list below.\n\n* [Multi-step form demo](https://codesandbox.io/s/github/donavon/use-step-multi-step-form-demo)\n","readmeFilename":"README.md","description":"A custom React Hooks library that gives you custom hooks for your code.","keywords":["react-hooks","hooks","react","utils","lib","form","step","wizard"],"author":{"name":"revelcw"},"homepage":"https://github.com/revelcw/react-hooks-helper#readme","repository":{"type":"git","url":"git+https://github.com/revelcw/react-hooks-helper.git"},"bugs":{"url":"https://github.com/revelcw/react-hooks-helper/issues"}}