{"id":13794971,"url":"https://github.com/capacitor-community/react-hooks","last_synced_at":"2025-10-04T14:21:50.954Z","repository":{"id":39617839,"uuid":"221487079","full_name":"capacitor-community/react-hooks","owner":"capacitor-community","description":"⚡️ React hooks for Capacitor ⚡️","archived":false,"fork":false,"pushed_at":"2023-02-28T23:54:15.000Z","size":6405,"stargazers_count":254,"open_issues_count":20,"forks_count":22,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-26T16:53:23.259Z","etag":null,"topics":["capacitor","hybrid-apps","react","react-hooks"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/capacitor-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-11-13T15:11:30.000Z","updated_at":"2025-03-01T17:00:47.000Z","dependencies_parsed_at":"2024-01-02T23:09:29.919Z","dependency_job_id":"ac31b7a1-49a7-45bc-b436-317d951d3d5f","html_url":"https://github.com/capacitor-community/react-hooks","commit_stats":{"total_commits":83,"total_committers":13,"mean_commits":6.384615384615385,"dds":0.5301204819277108,"last_synced_commit":"bfdf2b7b78651fd1f7c1ce53d4986b7b3148b0ee"},"previous_names":["ionic-team/ionic-react-hooks"],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capacitor-community%2Freact-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capacitor-community%2Freact-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capacitor-community%2Freact-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capacitor-community%2Freact-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/capacitor-community","download_url":"https://codeload.github.com/capacitor-community/react-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234921,"owners_count":20905854,"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":["capacitor","hybrid-apps","react","react-hooks"],"created_at":"2024-08-03T23:00:50.666Z","updated_at":"2025-10-04T14:21:45.932Z","avatar_url":"https://github.com/capacitor-community.png","language":"TypeScript","funding_links":[],"categories":["Plugins","TypeScript","Community plugins"],"sub_categories":["Community Plugins"],"readme":"\u003cp align=\"center\"\u003e\u003cbr\u003e\u003cimg src=\"https://user-images.githubusercontent.com/236501/85893648-1c92e880-b7a8-11ea-926d-95355b8175c7.png\" width=\"128\" height=\"128\" /\u003e\u003c/p\u003e\n\u003ch3 align=\"center\"\u003eCapacitor React Hooks\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  A set of hooks to help Capacitor developers use native \u003ca href=\"http://capacitorjs.com/\" target=\"_blank\"\n  \u003eCapacitor APIs\u003c/a\u003e.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/maintenance/yes/2021?style=flat-square\" /\u003e\n  \u003ca href=\"https://github.com/capacitor-community/react-hooks/actions?query=workflow%CI\"\u003e\u003cimg src=\"https://img.shields.io/github/workflow/status/capacitor-community/react-hooks/CI?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@capacitor-community/react-hooks\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@capacitor-community/react-hooks?style=flat-square\" /\u003e\u003c/a\u003e\n\u003cbr\u003e\n \u003cimg src=\"https://img.shields.io/badge/capacitor%20v3%20support-yes-brightgreen?logo=Capacitor\u0026style=flat-square\" /\u003e\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\u003ca href=\"#contributors-\"\u003e\u003cimg src=\"https://img.shields.io/badge/all%20contributors-6-orange?style=flat-square\" /\u003e\u003c/a\u003e\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\u003c/p\u003e\n\n## Maintainers\n\n| Maintainer   | GitHub                                        | Social                                          |\n| ------------ | --------------------------------------------- | ----------------------------------------------- |\n| Ely Lucas   | [elylucas](https://github.com/elylucas)           | [@elylucas](https://twitter.com/elylucas)       |\n\n\u003e These docs are for Capacitor 3 plugins. For docs that target v2 plugins, see the [capv2](https://github.com/capacitor-community/react-hooks/tree/capv2) branch.\n## Getting Started\n\nTo start using Capacitor Hooks in your app, you install the React Hook package along with the Capacitor plugin you want to use. Here is an example of using the Storage plugin along with it's React hook:\n\n```bash\n# Install the Capacitor Plugin\nnpm install @capacitor/storage \n# And then the React hook package:\nnpm install @capacitor-community/storage-react\n```\n\nImport the hooks:\n```jsx\nimport { useStorage } from '@capacitor-community/storage-react'\n```\n\nThen use the hooks in your app:\n\n```jsx\nconst [value, setValue] = useStorage('mykey');\n```\n\n## Feature Detection\n\nWhile Capacitor allows you to write to one API across several platforms, not all features are supported on all platforms. It is encouraged to check if the feature you intend to use is available before using it to avoid any runtime errors.\n\nEach of the hook plugin paths exports an `availableFeatures` object, which contains a list features for that plugin. If the feature is supported for the current platform the app is running on, that feature will be true:\n\n```jsx\nconst { useStorageItem, availableFeatures } = `@capacitor-community/storage-react`;\nconst [value, setValue] = useStorage('mykey');\n...\nif(availableFeatures.useStorage) {\n  // Storage is available, feel free to use it!\n  setValue('cake');\n}\n```\n\n# Upgrading from Capacitor 2 React Hooks\n\nIn Capacitor 3, all the plugins were separated into their own packages. Likewise, the new React hooks plugins were also put into their own package, so you will need to install the hook for each plugin you use. \n\nAny deprecated API'S from Capacitor 2 to 3 were also removed and updated, so you might need to make some modifications to account for API changes. See the [Capacitor Plugin API for](https://capacitorjs.com/docs/plugins) to learn more.\n\n# Hook Usage\n\n## @capacitor/app Hooks\n\nInstallation:\n\n```bash\nnpm install @capacitor-community/app-react\n```\n\nUsage:\n\n```jsx\nimport { useAppState, useAppUrlOpen, useLaunchUrl, availableFeatures } from '@capacitor-community/app-react';\n```\n\n`useAppState` provides access to App status information, such as whether the app is active or inactive. This value will update dynamically.\n\n```jsx\nconst {state} = useAppState();\n```\n\n#### `useLaunchUrl`\n\n`useLaunchUrl` provides the URL the app was initially launched with. If you'd like to track future inbound URL events, use `useAppUrlOpen` below instead.\n\n```jsx\nconst { launchUrl } = useLaunchUrl();\n```\n\n#### `useAppUrlOpen`\n\n`useAppUrlOpen` provides the most recent URL used to activate the app. For example, if the user followed a link in another app that opened your app.\n\n```jsx\nconst { appUrlOpen } = useAppUrlOpen();\n```\n\nSee the [App](https://capacitorjs.com/docs/apis/app) Capacitor Plugin docs for more info on the plugin API.\n\n## @capcitor/browser Hooks\n\nInstallation:\n\n```bash\nnpm install @capacitor-community/browser-react\n```\n\nUsage: \n\n```jsx\nimport { useClose, useOpen, availableFeatures } from '@capacitor-community/browser-react';\n```\n\n`useOpen`, `useClose` provides a way to launch, and close an in-app browser for external content:\n\n```jsx\n// Open url in browser\nconst { open } = useOpen();\n\nopen({ url: 'http://ionicframework.com' });\n\n// Close url in browser\nconst { close } = useClose();\nuseClose();\n```\n\nSee the [Browser](https://capacitorjs.com/docs/apis/browser) Capacitor Plugin docs for more info on the plugin API.\n\n## @capacitor/camera Hooks\n\nInstallation:\n\n```bash\nnpm install @capacitor-community/camera-react\n```\n\nUsage:\n\n```jsx\nimport { useCamera, availableFeatures } from '@capacitor-community/camera-react';\n```\n\n`useCamera` provides a way to take a photo:\n\n```jsx\nconst { photo, getPhoto } = useCamera();\nconst triggerCamera = useCallback(async () =\u003e {\n  getPhoto({\n      quality: 100,\n      allowEditing: false,\n      resultType: CameraResultType.DataUrl\n    })\n}, [getPhoto]);\n\n\u003cdiv\u003e{photo \u0026\u0026 \u003cimg alt=\"\" src={photo.dataUrl} /\u003e}\u003c/div\u003e\n```\n\nSee the [Camera](https://capacitorjs.com/docs/apis/camera) Capacitor Plugin docs for more info on the plugin API.\n\n## Clipboard Hooks\n\nInstallation:\n\n```bash\nnpm install @capacitor-community/clipboard-react\n```\n\nUsage:\n\n```jsx\nimport { useClipboard, availableFeatures } from '@capacitor-community/clipboard-react';\n```\n\n`useClipboard` reads and writes clipboard data:\n\n```jsx\nconst { value, getValue, setValue } = useClipboard();\n\nconst paste = useCallback(async () =\u003e {\n  await setValue('http://ionicframework.com/);\n}, [setValue]);\n\nconst copy = useCallback(async () =\u003e {\n  getValue(); \n}, [getValue])\n```\n\nSee the [Clipboard](https://capacitorjs.com/docs/apis/clipboard) Capacitor Plugin docs for more info on the plugin API.\n\n## Device Hooks\n\nInstallation:\n\n```bash\nnpm install @capacitor-community/device-react\n```\n\nUsage: \n\n```jsx\nimport { useGetInfo, useGetLanguageCode, availableFeatures } from '@capacitor-community/device-react';\n```\n\n`useGetInfo`, `useGetLanguageCode` gives access to device information and device language settings:\n\n```jsx\nconst { info } = useGetInfo();\nconst { languageCode } = useGetLanguageCode();\n```\n\nSee the [Device](https://capacitorjs.com/docs/apis/device) Capacitor Plugin docs for more info on the plugin API.\n\n## Filesystem Hooks\n\nInstallation:\n\n```bash\nnpm install @capacitor-community/filesystem-react\n```\n\nUsage:\n\n```jsx\nimport { useFilesystem, base64FromPath, availableFeatures } from '@capacitor-community/filesystem-react';\n```\n\n`useFilesystem` returns back common methods to gain access to file system apis.\n\n```jsx\nconst { readFile } = useFilesystem();\n\nconst file = await readFile({\n  path: filepath,\n  directory: FilesystemDirectory.Data\n});\n```\n\n`base64FromPath` is a helper method that will take in a path to a file and return back the base64 encoded representation of that file.\n\nSee the [Filesystem](https://capacitorjs.com/docs/apis/filesystem) Capacitor Plugin docs for more info on the plugin API.\n\n```jsx\nconst base64String = await base64FromPath(path);\n```\n\n## Geolocation Hooks\n\nInstallation:\n\n```bash\nnpm install @capacitor-community/geolocation-react\n```\n\nUsage:\n\n```jsx\nimport { useCurrentPosition, useWatchPosition, availableFeatures } from '@capacitor-community/geolocation-react';\n```\n\n`useCurrentPosition` returns a single geolocation position using the Geolocation API in Capacitor. The position can be manually updated by calling `getPosition`:\n\n```jsx\nconst { currentPosition, getPosition } = useCurrentPosition();\n\nconst handleRefreshPosition = () =\u003e {\n  getPosition();\n}\n```\n\n`useWatchPosition` tracks a geolocation position using the `watchPosition` in the Geolocation API in Capacitor. The location will automatically begin updating, and you can use the `clearWatch` and `startWatch` methods to manually stop and restart the watch.\n\n```jsx\nconst { currentPosition, startWatch, clearWatch } = useWatchPosition();\n```\n\nSee the [Geolocation](https://capacitorjs.com/docs/apis/geolocation) Capacitor Plugin docs for more info on the plugin API.\n## Keyboard Hooks\n\nInstallation:\n\n```bash\nnpm install @capacitor-community/keyboard-react\n```\n\nUsage:\n\n```jsx\nimport { useKeyboardState } from '@capacitor-community/keyboard';\n```\n\n`useKeyboard` returns whether or not the on-screen keyboard is shown as well as an approximation of the keyboard height in pixels.\n\n```jsx\nconst { isOpen, keyboardHeight } = useKeyboard();\n// Use keyboardHeight to translate an input that would otherwise be hidden by the keyboard\n```\n\nSee the [Keyboard](https://capacitorjs.com/docs/apis/keyboard) Capacitor Plugin docs for more info on the plugin API.\n\n## Network Hooks\n\nInstallation:\n\n```bash\nnpm install @capacitor-community/network-react\n```\n\nUsage:\n\n```jsx\nimport { useStatus, availableFeatures } from '@capacitor-community/network-react';\n```\n\n`useStatus` monitors network status and information:\n\n```jsx\n const { networkStatus } = useStatus();\n```\n\nSee the [Network](https://capacitorjs.com/docs/apis/network) Capacitor Plugin docs for more info on the plugin API.\n## ScreenReader Hooks\n\nInstallation:\n\n```bash\nnpm install @capacitor-community/screen-reader-react\n```\n\nUsage:\n\n```jsx\nimport { useIsScreenReaderEnabled, useSpeak, availableFeatures } from '@capacitor-community/screen-reader-react';\n```\n\n`useIsScreenReaderEnabled` provides access to detecting and responding to a screen reading device or OS setting being enabled:\n\n```jsx\nconst {isScreenReaderEnabled} = useIsScreenReaderEnabled();\n```\n\n`useSpeak` activates a text-to-speech engine (if available) to read spoken text.\n```jsx\nconst { speak } = useSpeak();\nspeak({value: textToSpeak})\n```\n\nSee the [ScreenReader](https://capacitorjs.com/docs/apis/screenreader) Capacitor Plugin docs for more info on the plugin API.\n\n## Storage Hooks\n\nInstallation:\n\n```bash\nnpm install @capacitor-community/storage-react\n```\n\nUsage:\n\n```jsx\nimport { useStorage, useStorageItem, availableFeatures } from '@capacitor-community/storage-react';\n```\n\n`useStorage` provides access to Capacitor's storage engine. There is also a helper called `useStorageItem` which makes managing a single item easy if you don't need to access the full Storage API (see below)\n\n```jsx\nconst { get, set, remove, getKeys, clear } = useStorage();\nuseEffect(() =\u003e {\n  async function example() {\n    const value = await get('name');\n    await set('name', 'Max');\n    await remove('name');\n    const allKeys = await getKeys();\n    await clear();\n  }\n}, [ get, set, remove, keys, clear ]);\n```\n\n#### `useStorageItem`\n\n`useStorageItem` tracks a single item and provides a nice way to read and write that item:\n\n```jsx\nconst [ name , setName ] = useStorageItem('name', 'Max');\n\n// Example:\nconst updateName = useCallback((n) =\u003e {\n  setName(n);\n}, [ setName ]);\n```\n\n`useStorageItem` will use the initial value already in storage, or the one provided if there is no existing value.\n\nSee the [Storage](https://capacitorjs.com/docs/apis/storage) Capacitor Plugin docs for more info on the plugin API.\n\n# Other Hooks\n\nThis is an evolving project and not all of the Capacitor Plugins are supported yet. If there is one you need, feel free top open an issue for it, or better yet, submit a PR!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapacitor-community%2Freact-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcapacitor-community%2Freact-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapacitor-community%2Freact-hooks/lists"}