{"id":22533633,"url":"https://github.com/cool-hooks/react-qr-hooks","last_synced_at":"2025-04-09T18:04:17.438Z","repository":{"id":38174056,"uuid":"229121522","full_name":"cool-hooks/react-qr-hooks","owner":"cool-hooks","description":"📱 Encode \u0026 decode QR code in React","archived":false,"fork":false,"pushed_at":"2023-01-06T17:35:33.000Z","size":1836,"stargazers_count":5,"open_issues_count":29,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-09-20T11:54:11.100Z","etag":null,"topics":["decoder","encoder","hooks","library","qrcode","react"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-qr-hooks-7iv35","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cool-hooks.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-19T19:07:59.000Z","updated_at":"2023-06-29T12:35:39.000Z","dependencies_parsed_at":"2023-02-06T07:17:02.567Z","dependency_job_id":null,"html_url":"https://github.com/cool-hooks/react-qr-hooks","commit_stats":null,"previous_names":["jb1905/react-qr-hooks"],"tags_count":6,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cool-hooks%2Freact-qr-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cool-hooks%2Freact-qr-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cool-hooks%2Freact-qr-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cool-hooks%2Freact-qr-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cool-hooks","download_url":"https://codeload.github.com/cool-hooks/react-qr-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248084164,"owners_count":21045123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["decoder","encoder","hooks","library","qrcode","react"],"created_at":"2024-12-07T09:09:06.651Z","updated_at":"2025-04-09T18:04:17.407Z","avatar_url":"https://github.com/cool-hooks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [react-qr-hooks](https://github.com/cool-hooks/react-qr-hooks)\n\n[![NPM version](https://img.shields.io/npm/v/react-qr-hooks?style=flat-square)](https://www.npmjs.com/package/react-qr-hooks)\n[![NPM downloads](https://img.shields.io/npm/dm/react-qr-hooks?style=flat-square)](https://www.npmjs.com/package/react-qr-hooks)\n[![NPM license](https://img.shields.io/npm/l/react-qr-hooks?style=flat-square)](https://www.npmjs.com/package/react-qr-hooks)\n[![Codecov](https://img.shields.io/codecov/c/github/cool-hooks/react-qr-hooks?style=flat-square)](https://codecov.io/gh/cool-hooks/react-qr-hooks)\n[![Travis](https://img.shields.io/travis/cool-hooks/react-qr-hooks/master?style=flat-square)](https://travis-ci.org/cool-hooks/react-qr-hooks)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-qr-hooks?style=flat-square)](https://bundlephobia.com/result?p=react-qr-hooks)\n\n## About\n\nEncode \u0026 decode QR code in React\n\n### Demo\n\n**[Playground – play with the library in CodeSandbox](https://codesandbox.io/s/react-qr-hooks-7iv35)**\n\n### Similar Projects\n\n- [react-use-qrcode](https://github.com/pocesar/react-use-qrcode/) by [Paulo Cesar](https://github.com/pocesar/)\n- [react-qr-reader](https://github.com/JodusNodus/react-qr-reader/) by [Thomas Billiet](https://github.com/JodusNodus/)\n- [qrcode](https://github.com/soldair/node-qrcode/) by [Ryan Day](https://github.com/soldair/)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-qr-hooks\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-qr-hooks\n```\n\n## Getting Started\n\n**• Import hooks in React application file:**\n\n```js\nimport { useQrEncode, useQrDecode } from 'react-qr-hooks';\n```\n\n### useQrEncode\n\n#### Options\n\n| Name        | Type                   | Default | Description                  |\n| ----------- | ---------------------- | ------- | ---------------------------- |\n| **text**    | string                 | ` `     | Text to encode               |\n| **options** | QRCodeToDataURLOptions | `{}`    | Options for `qrcode` library |\n\n#### Returned Values\n\n| Type   | Description   |\n| ------ | ------------- |\n| string | Encoded value |\n\n### useQrDecode\n\n#### Options\n\n| Name        | Type   | Default | Description                                                      |\n| ----------- | ------ | ------- | ---------------------------------------------------------------- |\n| **data**    | string | ` `     | An image from url or an `\u003cimg\u003e` element with a src attribute set |\n| **options** | object | `{}`    | Options for `qrcode-decoder` library                             |\n\n#### Returned Values\n\n| Type   | Description                |\n| ------ | -------------------------- |\n| string | value decoded from QR code |\n\n## Example\n\n```js\nimport React from 'react';\nimport { useQrEncode, useQrDecode } from 'react-qr-hooks';\n\nconst App = () =\u003e {\n  const encoded = useQrEncode(\n    'Hello world!' /* object with options (if needed) */\n  );\n\n  const decoded = useQrDecode(encoded /* object with options (if needed) */);\n\n  return (\n    \u003c\u003e\n      \u003cimg src={encoded} alt=\"My QR code\" /\u003e\n      \u003cp\u003e{decoded}\u003c/p\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default App;\n```\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcool-hooks%2Freact-qr-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcool-hooks%2Freact-qr-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcool-hooks%2Freact-qr-hooks/lists"}