{"_id":"@alexrah/react-use-random-hook","_rev":"1-f1c60683e36b71c6cf74bc3b235c0699","name":"@alexrah/react-use-random-hook","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@alexrah/react-use-random-hook","version":"1.0.0","keywords":["react","random","hooks","number","string"],"author":{"name":"alessandro stoppato"},"license":"MIT","_id":"@alexrah/react-use-random-hook@1.0.0","maintainers":[{"name":"alexrah","email":"alexrah@gmail.com"}],"homepage":"https://github.com/alexrah/react-use-random-hook#readme","bugs":{"url":"https://github.com/alexrah/react-use-random-hook/issues"},"dist":{"shasum":"cccaaba7ec6c1c823f6d95dca9f9c6b9e89e5309","tarball":"https://registry.npmjs.org/@alexrah/react-use-random-hook/-/react-use-random-hook-1.0.0.tgz","fileCount":11,"integrity":"sha512-2qqp9CIkTDO5YrNC3yR/Ibr0esnaXpt6kcQ5h2jCrqQzlTYm1sQ2oxHmcFzW94RWN2xfLS6EhkMv/Hulnjaofg==","signatures":[{"sig":"MEUCICVsoJaZt30yfWAdo9ZK+DqZx6E2G1hlPiCYvuy4uvH+AiEAnEVMs3V7g8Jq9ezZkvHcgZEPq5sa0tEHieLJHrBewkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23036},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/react-use-random-hook.esm.js","engines":{"node":">=10"},"gitHead":"a15205d587553cc6ca446df69faf66b4d0fa396b","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build"},"typings":"dist/index.d.ts","_npmUser":{"name":"alexrah","email":"alexrah@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/alexrah/react-use-random-hook.git","type":"git"},"size-limit":[{"path":"dist/react-use-random-hook.cjs.production.min.js","limit":"10 KB"},{"path":"dist/react-use-random-hook.esm.js","limit":"10 KB"}],"_npmVersion":"10.2.4","description":"A React hook for generating random numbers and strings and keep them consistent between renders.","directories":{},"_nodeVersion":"20.11.1","_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^9.1.5","react":"^17.0.2","tslib":"^2.7.0","react-dom":"^17.0.2","size-limit":"^11.1.4","typescript":"^5.5.4","@types/react":"^17.0.80","@types/react-dom":"^17.0.25","@size-limit/preset-small-lib":"^11.1.4"},"peerDependencies":{"react":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-use-random-hook_1.0.0_1725469152734_0.06422300561374072","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@alexrah/react-use-random-hook","author":{"name":"alessandro stoppato"},"version":"1.1.0","license":"MIT","repository":{"type":"git","url":"git+https://github.com/alexrah/react-use-random-hook.git"},"homepage":"https://github.com/alexrah/react-use-random-hook#readme","description":"A React hook for generating random numbers and strings and keep them consistent between renders.","keywords":["react","random","hooks","number","string"],"main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why"},"peerDependencies":{"react":">=17"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"module":"dist/react-use-random-hook.esm.js","size-limit":[{"path":"dist/react-use-random-hook.cjs.production.min.js","limit":"10 KB"},{"path":"dist/react-use-random-hook.esm.js","limit":"10 KB"}],"devDependencies":{"@size-limit/preset-small-lib":"^11.1.4","@types/react":"^17.0.80","@types/react-dom":"^17.0.25","husky":"^9.1.5","react":"^17.0.2","react-dom":"^17.0.2","size-limit":"^11.1.4","tsdx":"^0.14.1","tslib":"^2.7.0","typescript":"^5.5.4"},"_id":"@alexrah/react-use-random-hook@1.1.0","gitHead":"103edcccad8261ef82841c5ae5d6db2a9a89c255","bugs":{"url":"https://github.com/alexrah/react-use-random-hook/issues"},"_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-DCv62NLibMnO7esilB1BFL2pV/hs5LKv4xc5N2WngwKSS30c/cTZ5ZNeXqgxTsYeSeKFMDBsy35lp/bktRgiPw==","shasum":"1e22f05cf10660c1d08a35a9653bb5abeb29b92e","tarball":"https://registry.npmjs.org/@alexrah/react-use-random-hook/-/react-use-random-hook-1.1.0.tgz","fileCount":11,"unpackedSize":23945,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGKTcc1S4EI+WUocumk2jIUYd6/xzGJhrBuHnRGz6NBHAiEA6X6ecw4rqojjABmsVzbSVvtrLXI4Da7rrvIoIfFW9fs="}]},"_npmUser":{"name":"alexrah","email":"alexrah@gmail.com"},"directories":{},"maintainers":[{"name":"alexrah","email":"alexrah@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-use-random-hook_1.1.0_1727273259958_0.29140527445181563"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-04T16:59:12.657Z","modified":"2024-09-25T14:07:40.375Z","1.0.0":"2024-09-04T16:59:12.910Z","1.1.0":"2024-09-25T14:07:40.193Z"},"bugs":{"url":"https://github.com/alexrah/react-use-random-hook/issues"},"author":{"name":"alessandro stoppato"},"license":"MIT","homepage":"https://github.com/alexrah/react-use-random-hook#readme","keywords":["react","random","hooks","number","string"],"repository":{"type":"git","url":"git+https://github.com/alexrah/react-use-random-hook.git"},"description":"A React hook for generating random numbers and strings and keep them consistent between renders.","maintainers":[{"name":"alexrah","email":"alexrah@gmail.com"}],"readme":"# React useRandom() Hook\n\nA React hook for generating random numbers and strings and keep them consistent between renders.\n\n## Overview\n\nThis package exports a React hook, `useRandom`, which generates a random number between 0 and 1 and a random string. The hook also provides a provider, `RandomProvider`, which is required to enable `useRandom`.\n\n## Exported Functions\n\n### `RandomProvider`\n\n```typescript\nimport { RandomProvider } from '@alexrah/react-use-random-hook';\n\nconst App = () => {\n  <RandomProvider>\n    // ...\n  </RandomProvider>\n};\n```\n\nThe `RandomProvider` provider provides a way to share the random number with other components and keep the generated number consistent between renders.\n\n#### `RandomProvider` prop `numberBase`\n\nThe `numberBase` prop in `RandomProvider` is an optional parameter that allows you to specify the upper limit of the random number generated.\n\nAccording to the code snippet from `src/index.tsx:RandomProvider`, the `base` prop is used to multiply the random number generated by `Math.random()`. This means that the random number will be generated between 0 and the value of `base`.\n\nHere's the relevant code snippet:\n```typescript\nconst [random, ] = React.useState<number>( () =>{return Math.random()*base});\n```\nIf you don't provide a `base` prop, it will default to 1, which means the random number will be generated between 0 and 1.\n\nBy providing a `base` prop, you can generate random numbers within a specific range. For example, if you set `base` to 100, the random number will be generated between 0 and 100.\n\nHere's an example of how you can use the `base` prop:\n```typescript\nimport { RandomProvider } from '@alexrah/react-use-random-hook';\n\nconst App = () => {\n  <RandomProvider base={100}>\n    // ...\n  </RandomProvider>\n};\n```\nIn this example, the random number generated will be between 0 and 100.\n\n#### `RandomProvider` prop `stringLength`\n\nThe `stringLength` prop in `RandomProvider` is an optional parameter that allows you to specify the length of the random string generated.\n\nAccording to the code snippet from `src/index.tsx:RandomProvider`, the `stringLength` prop is used to generate a random string of the specified length.\n\nHere's the relevant code snippet:\n```typescript\nconst [randomString, ] = React.useState<string>( () =>{return generateRandomString(stringLength)});\n```\n\nBy default, the length of the random string is 4 characters. If you want to generate a random string with a different length, you can set the `stringLength` prop.\n\nFor example, if you set `stringLength` to 8, the random string will have a length of 8 characters.\n\nHere's an example of how you can use the `stringLength` prop:\n```typescript\nimport { RandomProvider } from '@alexrah/react-use-random-hook';\n\nconst App = () => {\n  <RandomProvider stringLength={10}>\n    // ...\n  </RandomProvider>\n};\n```\nIn this example, the random string generated will be 10 characters long.\n\n\n### `useRandom`\n\n```typescript\nimport { useRandom } from '@alexrah/react-use-random-hook';\n\nconst { randomNumber, randomString } = useRandom();\n```\n\nThe `useRandom` hook returns an object with two properties: `randomNumber` and `randomString`. \n- The `randomNumber: number` property returns a random number between 0 and 1. The number does not change between renders.\n- The `randomString: string` property returns a random string of the specified length. The string does not change between renders.\n\n\n### `generateRandomString`\n\n#### Description\n\nGenerates a random string of a specified length.\n\n#### Parameters\n\n* `stringLength`: The length of the random string to be generated. (Type: `number`)\n\n#### Returns\n\nA random string of the specified length. (Type: `string`)\n\n#### Example Usage\n\n```typescript\nconst randomString = generateRandomString(10);\nconsole.log(randomString); // Output: a random string of length 10\n```\n\n#### Implementation\n\nThe `generateRandomString` function uses a combination of uppercase and lowercase letters, as well as numbers, to generate a random string. The function iterates `stringLength` times, selecting a random character from the character set and appending it to the result string.\n\n\n## Scripts\n\nThe package defines several scripts in `package.json`:\n\n### `start`\n\n```bash\nnpm start\n```\n\nThe `start` script runs the `tsdx watch` command, which builds the package and runs it in watch mode. This means that any changes to the code will trigger a rebuild and re-run of the package.\n\n### `build`\n\n```bash\nnpm run build\n```\n\nThe `build` script runs the `tsdx build` command, which builds the package and generates the output files in the `dist` directory.\n\n### `test`\n\n```bash\nnpm test\n```\n\nThe `test` script runs the `tsdx test` command, which runs the tests.\n\n### `lint`\n\n```bash\nnpm run lint\n```\n\nThe `lint` script runs the `tsdx lint` command, which checks the code for any linting errors.\n\n### `size`\n\n```bash\nnpm run size\n```\n\nThe `size` script runs the `size-limit` command, which checks the size of the output files in the `dist` directory.\n\n### `analyze`\n\n```bash\nnpm run analyze\n```\n\nThe `analyze` script runs the `size-limit --why` command, which provides more detailed information about the size of the output files in the `dist` directory.\n\n## Example Usage\n---------------\n\nHere is an example of how to use the `useRandom` hook:\n```typescript\nimport React from 'react';\nimport { useRandom, RandomProvider } from '@alexrah/react-use-random-hook';\n\nconst App = () => {\n  const { randomNumber, randomString } = useRandom();\n  return <div>Random number: {randomNumber}<br/>Random string: {randomString}</div>;\n};\n\nReactDOM.render(<RandomProvider><App/></RandomProvider>, document.getElementById('root'));\n\n```\nThis code defines a React component that uses the `useRandom` hook to generate a random number, and then displays the number in a `div` element.\n","readmeFilename":"README.md"}