{"_id":"@dmnchzl/awesome-hooks","_rev":"2-d6f962ca193026ad3fa7ea366a47ee1f","name":"@dmnchzl/awesome-hooks","dist-tags":{"latest":"0.4.1"},"versions":{"0.4.0":{"name":"@dmnchzl/awesome-hooks","version":"0.4.0","description":"Awesome Hooks","main":"dist/bundle.min.js","author":{"name":"Damien Chazoule","email":"damien.chazoule@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/dmnchzl/awesomehooks.git"},"scripts":{"lint":"eslint src","lint:fix":"yarn lint --fix","test":"jest","test:coverage":"yarn test --coverage && codecov","build":"rollup -c","build:prod":"rollup --config rollup.prod.config.js"},"devDependencies":{"@babel/cli":"~7.14.0","@babel/core":"~7.14.0","@babel/preset-env":"~7.14.0","@babel/preset-react":"~7.13.0","@rollup/plugin-commonjs":"~19.0.0","@testing-library/jest-dom":"~5.12.0","@testing-library/react":"~11.2.0","babel-eslint":"~10.1.0","babel-jest":"~26.6.0","codecov":"~3.8.0","core-js":"~3.12.0","eslint":"~7.26.0","eslint-config-prettier":"~8.3.0","eslint-plugin-prettier":"~3.4.0","eslint-plugin-react":"~7.23.0","eslint-plugin-react-hooks":"~4.2.0","jest":"~26.6.0","prettier":"~2.3.0","prop-types":"~15.7.0","react":"^16.14.0","react-dom":"^16.14.0","regenerator-runtime":"~0.13.0","rollup":"~2.48.0","rollup-plugin-babel":"~4.4.0","rollup-plugin-terser":"~7.0.0"},"peerDependencies":{"react":"^16.14.0","react-dom":"^16.14.0"},"keywords":["react","awesome","hooks"],"license":"Beerware","gitHead":"0393b669fb27db0f05d4bc9f3804c43b72a75c0a","bugs":{"url":"https://github.com/dmnchzl/awesomehooks/issues"},"homepage":"https://github.com/dmnchzl/awesomehooks#readme","_id":"@dmnchzl/awesome-hooks@0.4.0","_nodeVersion":"14.17.6","_npmVersion":"7.24.0","dist":{"integrity":"sha512-RGHg7fZwfNm6tDz9g1sLVC4tAAmU12qQcVI2QTdnqVkXsrFfzAY2M306v8VBmCEws9ELZyDj9gTycsO8TgvtSg==","shasum":"934236d49dfaf99ce4cbc63bf9f23b3b2f7b7fc3","tarball":"https://registry.npmjs.org/@dmnchzl/awesome-hooks/-/awesome-hooks-0.4.0.tgz","fileCount":11,"unpackedSize":25691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwgmNCRA9TVsSAnZWagAA+gMQAIHiPeJHQsFuNNNUuDsq\nGijZYJbdO/18hbx0JyKkrO+KPP2pSWEz8zIojHyLy8oqauRTtL6HEpMu2rDJ\nl7TLh3P0jdTpGXpUo9P+2473JBMeWrqC/d1vFOI56+NwFgLlUgLLZ8N3IYWK\nWMhRnrP3DtCOeGrsj8S5nHslnF4pvtVEqB6SbyNKyUvqQf6fVoSAb60XmpW8\nV/hqOvE+SksqqucnBNMOlfld4c7Cf/KqdzD4I4XLkiR7k0Fn0GxfNe96XHwq\nrHGK9bDhqnKDaUlj0v+QBf+ioq6WqOzxIc6fNybONc/wfmz2ayyDMAMIgFky\nPK5WogrJrBDFIPLcGqcGI91jFFKQlWRyGtiUgnzmFJl5Y3uKBpZgilxfs8rg\njqoxokl/TzgjbOlBFf9cn7MLMHFCnFNhdsT9BEBEdzPPXrxyDjD2+0Ogq7dd\nhdF/FXBWWJEjzrGnvOMYfnniK3zhdM/+VOMx4+oA0+jI8SLFtb6XwkPj84i1\n4o7EHQXrNBlLIz2vRHV5logGNMJWZZCFcfcdwwj33QyX3uiR6b7TsoHk638q\nEdvkcWgJAEHHBcEb40UDPRq4MC2ztRQf7Aln67xBtiqTIrWJp0mRTRtm7H/P\nRVu+A+GgSdKtyxq9Zi/wmNBiIl26xfrpI0y/58m+L6HVTcvezB9FoSimY4mL\nw7QC\r\n=TR0p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlle1iej/M1/ndAWKUXvEnl6LllN++Lnh3q52O0eNiKAIhAKOH9p5JRvwUWg4pgaQiQyD5zozHfMfQ5JKlGcD+iwsC"}]},"_npmUser":{"name":"dmnchzl","email":"damien.chazoule@gmail.com"},"directories":{},"maintainers":[{"name":"dmnchzl","email":"damien.chazoule@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/awesome-hooks_0.4.0_1640106381284_0.29574025050517716"},"_hasShrinkwrap":false},"0.4.1":{"name":"@dmnchzl/awesome-hooks","version":"0.4.1","description":"Awesome Hooks","main":"dist/bundle.min.js","author":{"name":"Damien Chazoule","email":"damien.chazoule@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/dmnchzl/awesomehooks.git"},"scripts":{"lint":"eslint src","lint:fix":"yarn lint --fix","test":"jest","test:coverage":"yarn test --coverage && codecov","build":"rollup -c","build:prod":"rollup --config rollup.prod.config.js"},"devDependencies":{"@babel/cli":"~7.14.0","@babel/core":"~7.14.0","@babel/preset-env":"~7.14.0","@babel/preset-react":"~7.13.0","@rollup/plugin-commonjs":"~19.0.0","@testing-library/jest-dom":"~5.12.0","@testing-library/react":"~11.2.0","babel-eslint":"~10.1.0","babel-jest":"~26.6.0","codecov":"~3.8.0","core-js":"~3.12.0","eslint":"~7.26.0","eslint-config-prettier":"~8.3.0","eslint-plugin-prettier":"~3.4.0","eslint-plugin-react":"~7.23.0","eslint-plugin-react-hooks":"~4.2.0","jest":"~26.6.0","prettier":"~2.3.0","prop-types":"~15.7.0","react":"^16.14.0","react-dom":"^16.14.0","regenerator-runtime":"~0.13.0","rollup":"~2.48.0","rollup-plugin-babel":"~4.4.0","rollup-plugin-terser":"~7.0.0"},"peerDependencies":{"react":"^16.14.0","react-dom":"^16.14.0"},"keywords":["react","awesome","hooks"],"license":"Beerware","gitHead":"99c4d6f2d9c064422b585417771d93e6b810039b","bugs":{"url":"https://github.com/dmnchzl/awesomehooks/issues"},"homepage":"https://github.com/dmnchzl/awesomehooks#readme","_id":"@dmnchzl/awesome-hooks@0.4.1","_nodeVersion":"16.13.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-Bil4TPN3CXlWTickfBqOeUTRF8ISh3DluFTThgMvxZUJwHm1b8F/1oHQwbJQnUwo7iho23sEfLickjv7dCDaRw==","shasum":"0fd805edd9d5e10eefcedca39d428f9e5d290713","tarball":"https://registry.npmjs.org/@dmnchzl/awesome-hooks/-/awesome-hooks-0.4.1.tgz","fileCount":12,"unpackedSize":32179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/VysCRA9TVsSAnZWagAA1v8P/1OeDSnSosjVA3zSTnHs\n8Jtp3rPe5i5Hyf/g/KvlnkK2J//hQ0BBEfJQLDjASE7R0hXgXPvwlB2/KTSf\nLzyb5vm2xQpbgmkusD8FlYuCt939QYuk988TbeuYfbc/OJYoGvyKDIvVKDiH\n2fvhLLy5vrvzk36urqxOGBgxZiyvZBbp2WXvOXkBIVNMcVoGnXnQG/IXx1ES\nf3ezvBQNlAHz+LoLUyiu2bS2DNhoRrhJ0y7WBICS0Sd8PvOKWB/ZqpdeuYuJ\nwBaYJoBbq1/4D0KYWFmdZdAxv1+bovL2A2tGO5nfEFTWutGeSjK91xh/iIca\n4EwPy3mMZxzT1Dme1cY+T7+nJ95GRoczeR4VGtTyZ8biMZVO/vfrE2iPo8Ma\naexgw/UFj7zzK1tbe6Z26xgPpptdD2dLCEt7xzi72oJmLYdoGwoW+b0YA0lU\n95+HgWqDQ1opXHrEO+89m4rAq2ZB1FxbK7EuBJOEF7Vr8ebuIMeAKjqUIMuP\nkbrX84n+gI2D//Xghl3TcwGq5bctj4Af1rIVHn2rci1T2rRt5713CTF37oTf\nSlJlKEr2VyOmWpEei8STqJb7pOq6PZfDrrWxKLJx5MtlPRiuTFABpTCP7LcO\n7BSIe47DIe/zz3VpJqz6W3R7iADQAKCzHShyHgPxpPdVKLJs+Cr3QtqXwIGB\nyMtz\r\n=ttKg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp9QOXK7U5+qHKn46F2Jp5apsLIYRWqvp+eQvhqRnbkgIhAM11Ly0cZ6FW/oUEkVi1ME6HiPjMOzJYe03Z/xJnvjEE"}]},"_npmUser":{"name":"dmnchzl","email":"damien.chazoule@gmail.com"},"directories":{},"maintainers":[{"name":"dmnchzl","email":"damien.chazoule@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/awesome-hooks_0.4.1_1643994284710_0.9657005908029879"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-21T17:06:21.226Z","0.4.0":"2021-12-21T17:06:21.486Z","modified":"2022-04-05T05:00:16.393Z","0.4.1":"2022-02-04T17:04:44.898Z"},"maintainers":[{"name":"dmnchzl","email":"damien.chazoule@gmail.com"}],"description":"Awesome Hooks","homepage":"https://github.com/dmnchzl/awesomehooks#readme","keywords":["react","awesome","hooks"],"repository":{"type":"git","url":"git+https://github.com/dmnchzl/awesomehooks.git"},"author":{"name":"Damien Chazoule","email":"damien.chazoule@gmail.com"},"bugs":{"url":"https://github.com/dmnchzl/awesomehooks/issues"},"license":"Beerware","readme":"[![npm](https://img.shields.io/npm/v/@dmnchzl/awesome-hooks.svg)](https://github.com/dmnchzl/awesomehooks) [![build](https://travis-ci.org/DmnChzl/AwesomeHooks.svg)](https://travis-ci.org/DmnChzl/AwesomeHooks.svg) [![minified size](https://img.shields.io/bundlephobia/min/@dmnchzl/awesome-hooks.svg)](https://www.npmjs.com/package/@dmnchzl/awesome-hooks) [![codecov](https://img.shields.io/codecov/c/github/DmnChzl/AwesomeHooks.svg)](https://codecov.io/gh/DmnChzl/AwesomeHooks) [![beerware](https://img.shields.io/badge/license-beerware-orange.svg)](https://wikipedia.org/wiki/beerware)\n\n# Awesome Hooks\n\n**@dmnchzl/awesome-hooks** is a collection of custom React hooks.\n\nThis library is published with the Beerware license, which means you can do whatever you want with the code.\n\n## Hooks\n\nBelow, the list of all available hooks:\n\n**useCounter**\n\n> _Use it to create a ~~simple~~ counter_\n\n```js\nimport React from 'react';\nimport { useCounter } from '@dmnchzl/awesome-hooks';\n\nexport default function Counter(props) {\n  const { value, add, del, reset } = useCounter(0);\n\n  return (\n    <div>\n      {value}\n      <button onClick={() => add(2)}>+2</button>\n      <button onClick={() => del(2)}>-2</button>\n      <button onClick={reset}>0</button>\n    </div>\n  );\n}\n```\n\n**useDocumentTitle**\n\n> _Use it to change the site title_\n\n```js\nimport React from 'react';\nimport { useDocumentTitle } from '@dmnchzl/awesome-hooks';\n\nexport default function HelloWorld(props) {\n  useDocumentTitle('Hello World');\n\n  return <div>{/* ... */}</div>;\n}\n```\n\n**useMeta**\n\n> _Use it to add / change a metadata_\n\n```js\nimport React from 'react';\nimport { useMeta } from '@dmnchzl/awesome-hooks';\n\nexport default function LoremIpsum(props) {\n  useMeta('theme-color', '#2a2c2e');\n  useMeta('description', 'Lorem Ipsum Dolor Sit Amet');\n\n  return <div>{/* ... */}</div>;\n}\n```\n\n**useObject**\n\n> _Use it to handle an object_\n\n```js\nimport React, { useEffect } from 'react';\nimport { useObject } from '@dmnchzl/awesome-hooks';\n\nexport default function App(props) {\n  const [person, setPerson, isEmpty] = useObject({\n    firstName: 'Morty',\n    lastName: 'Smith'\n  });\n\n  useEffect(() => {\n    setPerson({\n      firstName: 'Rick',\n      lastName: 'Sanchez'\n    });\n  }, [setPerson]);\n\n  return (\n    <ul>\n      {!isEmpty && Object.entries(person).map(([key, value], idx) => (\n        <li key={idx}>\n          {key}: {value}\n        </li>\n      ))}\n    </ul>\n  );\n}\n```\n\n**useInput**\n\n> _Use it to handle the behaviour of an input_\n\n```js\nimport React from 'react';\nimport { useInput } from '@dmnchzl/awesome-hooks';\n\nexport default function Input(props) {\n  const [value, setValue] = useInput('');\n\n  return <input defaultValue={value} onChange={setChange} />;\n}\n```\n\n**useField**\n\n> _Use it to associate a value with a potential error (example with a form field)_\n\n```js\nimport React from 'react';\nimport { useField } from '@dmnchzl/awesome-hooks';\n\nexport default function Form(props) {\n  const { value, error, setValue, setError, reset } = useField('');\n\n  const handleSubmit = event => {\n    event.preventDefault();\n\n    if (value.length < 5) {\n      setError('Too Short');\n    } else {\n      setError('Too Long');\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input defaultValue={value} onChange={e => setValue(e.target.value)} />\n      {error && <p>{error}</p>}\n      <button type=\"submit\">Submit</button>\n      <button onClick={reset}>Reset</button>\n    </form>\n  );\n}\n```\n\n**useArray**\n\n> _Use it to handle an array_\n\n```js\nimport React, { useEffect } from 'react';\nimport { useArray } from '@dmnchzl/awesome-hooks';\n\nexport default function List(props) {\n  const { values, setValues, addValue, setValue, delValue } = useArray([]);\n\n  useEffect(() => {\n    if (values.length < 0) {\n      setValues([\n        { firstName: 'Rick', lastName: 'Sanchez' },\n        { firstName: 'Morty', lastName: 'Smith' }\n      ]);\n    }\n  }, [values, setValues]);\n\n  return (\n    <ul>\n      {values.map(({ firstName, lastName }) => (\n        <li>\n          <input defaultValue={value.firstName} onChange={e => setValue(e.target.value, 'firstName')}>\n          <button onClick={() => delValue(lastName, 'lastName')}>\n            Del\n          </button>\n        </li>\n      ))}\n      <button onClick={() => addValue({ firstName: 'Summer', lastName: 'Smith' })}>\n        Add\n      </button>\n    </ul>\n  );\n}\n```\n\n**useToggle**\n\n> _Use it to play with toggles_\n\n```js\nimport React, { useEffect } from 'react';\nimport { useToggle } from '@dmnchzl/awesome-hooks';\n\nexport default function Toggle(props) {\n  const [value, switchOn, switchOff] = useToggle(true);\n\n  return (\n    <div>\n      {value}\n      <button onClick={switchOn}>Switch On</button>\n      <button onClick={switchOff}>Switch Off</button>\n    </div>\n  );\n}\n```\n\n**useTimer**\n\n> _Use it to play with a timer_\n\n```js\nimport React from 'react';\nimport { useTimer } from '@dmnchzl/awesome-hooks';\n\nexport default function Calendar(props) {\n  const { days, hours, minutes, seconds } = useTimer(2020, 4, 4, 12);\n\n  return (\n    <div>\n      Remainin' Time Before May The 4th...\n      <h1>Days: {days}</h1>\n      <h2>Hours: {hours}</h2>\n      <h3>Minutes: {minutes}</h3>\n      <h4>Seconds: {seconds}</h4>\n    </div>\n  );\n}\n```\n\n**useStorage**\n\n> _Use it to handle an object (and persist it in the session / local storage)_\n\n```js\nimport React, { useEffect } from 'react';\nimport { useStorage } from '@dmnchzl/awesome-hooks';\n\nconst USE_LOCAL_STORAGE = true;\n\nexport default function App(props) {\n  const [person, setPerson] = useStorage('person', USE_LOCAL_STORAGE);\n\n  useEffect(() => {\n    setPerson({\n      firstName: 'Rick',\n      lastName: 'Sanchez'\n    });\n  }, [setPerson]);\n\n  return (\n    <ul>\n      {Object.entries(person).map(([key, value], idx) => (\n        <li key={idx}>\n          {key}: {value}\n        </li>\n      ))}\n    </ul>\n  );\n}\n```\n\n**useWindowSize**\n\n> _use it to evaluate screen width and length_\n\n```js\nimport React, { useEffect } from 'react';\nimport { useWindowSize } from '@dmnchzl/awesome-hooks';\n\nexport default function Size(props) {\n  const size = useWindowSize();\n\n  return (\n    <div>\n      <span aria-label=\"X\">X: {size.width}</span>\n      <span aria-label=\"Y\">Y: {size.height}</span>\n    </div>\n  );\n}\n```\n\n### Miscellaneous\n\nIf you want more,\n\nYou can clone the project:\n\n```\ngit clone https://github.com/dmnchzl/awesomehooks.git\n```\n\nInstall dependencies:\n\n```\nyarn install\n```\n\nRun all unit tests:\n\n```\nyarn test\n```\n\nAnd finally compile the project:\n\n```\nyarn build\n```\n\n## License\n\n```\n\"THE BEER-WARE LICENSE\" (Revision 42):\n<phk@FreeBSD.ORG> wrote this file. As long as you retain this notice you\ncan do whatever you want with this stuff. If we meet some day, and you think\nthis stuff is worth it, you can buy me a beer in return. Damien Chazoule\n```\n","readmeFilename":"README.md"}