{"id":22369540,"url":"https://github.com/nightdevilpt/react-voice-handler","last_synced_at":"2026-01-05T04:05:00.305Z","repository":{"id":257774388,"uuid":"859624796","full_name":"NightDevilPT/react-voice-handler","owner":"NightDevilPT","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-20T01:25:12.000Z","size":24,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-20T01:15:34.877Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NightDevilPT.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-19T01:58:40.000Z","updated_at":"2024-09-20T01:25:16.000Z","dependencies_parsed_at":"2024-09-19T02:50:52.705Z","dependency_job_id":"67330b2e-a810-4027-aad6-df2d80cde011","html_url":"https://github.com/NightDevilPT/react-voice-handler","commit_stats":null,"previous_names":["nightdevilpt/react-voice-handler"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NightDevilPT/react-voice-handler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NightDevilPT%2Freact-voice-handler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NightDevilPT%2Freact-voice-handler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NightDevilPT%2Freact-voice-handler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NightDevilPT%2Freact-voice-handler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NightDevilPT","download_url":"https://codeload.github.com/NightDevilPT/react-voice-handler/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NightDevilPT%2Freact-voice-handler/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267928970,"owners_count":24167430,"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","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-04T19:26:22.424Z","updated_at":"2026-01-05T04:05:00.249Z","avatar_url":"https://github.com/NightDevilPT.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003cbody\u003e\n\n  \u003ch1\u003eReact Voice Handler\u003c/h1\u003e\n  \u003cp\u003e\n    \u003cstrong\u003eReact Voice Handler\u003c/strong\u003e is a lightweight custom hook for recognizing voice commands using the Web Speech API in React applications. It allows you to trigger actions based on voice input, making your applications more interactive.\n  \u003c/p\u003e\n\n  \u003ch2\u003eFeatures\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003eSupports custom voice commands.\u003c/li\u003e\n    \u003cli\u003eTriggers actions based on recognized speech.\u003c/li\u003e\n    \u003cli\u003eWorks with the Web Speech API (supports both Chrome and Edge with \u003ccode\u003ewebkitSpeechRecognition\u003c/code\u003e fallback).\u003c/li\u003e\n    \u003cli\u003eHandles both continuous and non-continuous recognition modes.\u003c/li\u003e\n    \u003cli\u003eSupports multiple languages and dialects, with a wide selection of languages through the \u003ccode\u003eLangEnum\u003c/code\u003e.\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003eInstallation\u003c/h2\u003e\n  \u003cp\u003eTo install this package in your project, run the following command:\u003c/p\u003e\n  \u003cpre\u003e\u003ccode\u003enpm install react-voice-handler\u003c/code\u003e\u003c/pre\u003e\n\n  \u003ch2\u003eUsage\u003c/h2\u003e\n  \u003cp\u003eHere’s an example of how to use \u003ccode\u003euseVoiceCommands\u003c/code\u003e in your React application:\u003c/p\u003e\n  \u003ccode\u003e\u003cpre\u003e\nimport React from 'react';\nimport { useVoiceCommands, LangEnum } from 'react-voice-handler';\n\nconst App: React.FC = () =\u003e {\nconst commands = [\n{ command: 'hello', action: () =\u003e alert('Hello there!') },\n{ command: '안녕하세요', action: () =\u003e alert('hello') },\n{ command: 'goodbye', action: () =\u003e alert('Goodbye!') },\n];\n\nconst { startRecognition, stopRecognition } = useVoiceCommands(commands, { continuous: true, lang: LangEnum.EnglishUS });\n\nreturn (\n\u0026lt;div\u0026gt;\n\u0026lt;h1\u0026gt;Voice Command App\u0026lt;/h1\u0026gt;\n\u0026lt;button onClick={startRecognition}\u0026gt;Start Listening\u0026lt;/button\u0026gt;\n\u0026lt;button onClick={stopRecognition}\u0026gt;Stop Listening\u0026lt;/button\u0026gt;\n\u0026lt;/div\u0026gt;\n);\n};\n\nexport default App;\n\n  \u003c/pre\u003e\u003c/code\u003e\n\n  \u003ch2\u003eLanguage Support\u003c/h2\u003e\n  \u003cp\u003eThe \u003ccode\u003euseVoiceCommands\u003c/code\u003e hook supports a wide range of languages and dialects through the \u003ccode\u003eLangEnum\u003c/code\u003e. By default, it uses \u003ccode\u003eLangEnum.EnglishUS\u003c/code\u003e, but you can customize the language by passing the \u003ccode\u003elang\u003c/code\u003e option in the configuration object.\u003c/p\u003e\n  \u003cp\u003eFor example, to use Spanish (Spain):\u003c/p\u003e\n  \u003cpre\u003e\u003ccode\u003e\nconst { startRecognition, stopRecognition } = useVoiceCommands(commands, { lang: LangEnum.SpanishSpain });\n  \u003c/code\u003e\u003c/pre\u003e\n\n  \u003ch3\u003eAvailable Languages\u003c/h3\u003e\n  \u003cp\u003eHere are some of the available languages in the \u003ccode\u003eLangEnum\u003c/code\u003e:\u003c/p\u003e\n  \u003cul\u003e\n    \u003cli\u003eEnglish (US) - \u003ccode\u003eLangEnum.EnglishUS\u003c/code\u003e\u003c/li\u003e\n    \u003cli\u003eEnglish (UK) - \u003ccode\u003eLangEnum.EnglishUK\u003c/code\u003e\u003c/li\u003e\n    \u003cli\u003eSpanish (Spain) - \u003ccode\u003eLangEnum.SpanishSpain\u003c/code\u003e\u003c/li\u003e\n    \u003cli\u003eFrench (France) - \u003ccode\u003eLangEnum.FrenchFrance\u003c/code\u003e\u003c/li\u003e\n    \u003cli\u003eGerman (Germany) - \u003ccode\u003eLangEnum.GermanGermany\u003c/code\u003e\u003c/li\u003e\n    \u003cli\u003eChinese (Simplified) - \u003ccode\u003eLangEnum.ChineseSimplified\u003c/code\u003e\u003c/li\u003e\n    \u003cli\u003eJapanese (Japan) - \u003ccode\u003eLangEnum.JapaneseJapan\u003c/code\u003e\u003c/li\u003e\n    \u003cli\u003eRussian (Russia) - \u003ccode\u003eLangEnum.RussianRussia\u003c/code\u003e\u003c/li\u003e\n    \u003c!-- List other languages as needed --\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003eContinuous vs Non-Continuous Modes\u003c/h2\u003e\n  \u003cp\u003e\u003cstrong\u003eContinuous Mode\u003c/strong\u003e allows the voice recognition to keep listening after recognizing a command. Use this mode if you expect multiple commands over time without manually restarting the recognition.\u003c/p\u003e\n  \u003cpre\u003e\u003ccode\u003e\nconst { startRecognition, stopRecognition } = useVoiceCommands(commands, { continuous: true });\n  \u003c/code\u003e\u003c/pre\u003e\n\n  \u003cp\u003e\u003cstrong\u003eNon-Continuous Mode\u003c/strong\u003e stops the voice recognition after recognizing a command. Use this mode if you only expect a single command and want to manually restart recognition.\u003c/p\u003e\n  \u003cpre\u003e\u003ccode\u003e\nconst { startRecognition, stopRecognition } = useVoiceCommands(commands, { continuous: false });\n  \u003c/code\u003e\u003c/pre\u003e\n\n  \u003ch2\u003eHook API\u003c/h2\u003e\n  \u003cp\u003eThe hook accepts the following parameters:\u003c/p\u003e\n  \u003cul\u003e\n    \u003cli\u003e\n      \u003ccode\u003ecommands\u003c/code\u003e: An array of objects where each object contains a command string and an action function. Example:\n      \u003cpre\u003e\u003ccode\u003e\nconst commands = [\n{ command: 'hello', action: () =\u003e alert('Hello there!') },\n{ command: '안녕하세요', action: () =\u003e alert('hello') },\n{ command: 'goodbye', action: () =\u003e alert('Goodbye!') },\n];\n      \u003c/code\u003e\u003c/pre\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ccode\u003econtinuous\u003c/code\u003e (optional): A boolean indicating if the recognition should continue after recognizing a command. Default is \u003ccode\u003efalse\u003c/code\u003e.\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ccode\u003elang\u003c/code\u003e (optional): A language variant from the \u003ccode\u003eLangEnum\u003c/code\u003e enum. Example: \u003ccode\u003eLangEnum.EnglishUS\u003c/code\u003e. Default is \u003ccode\u003eLangEnum.EnglishUS\u003c/code\u003e.\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003eError Handling\u003c/h2\u003e\n  \u003cp\u003eThe hook allows error handling by passing a custom \u003ccode\u003eonError\u003c/code\u003e function in the options. For example:\u003c/p\u003e\n  \u003cpre\u003e\u003ccode\u003e\nconst handleError = (error) =\u003e {\n  console.error('Speech recognition error:', error);\n};\n\nconst { startRecognition, stopRecognition } = useVoiceCommands(commands, { onError: handleError });\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnightdevilpt%2Freact-voice-handler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnightdevilpt%2Freact-voice-handler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnightdevilpt%2Freact-voice-handler/lists"}