{"id":22208533,"url":"https://github.com/nicorobo/react-midi-hooks","last_synced_at":"2025-08-08T12:11:22.156Z","repository":{"id":34448860,"uuid":"178796200","full_name":"nicorobo/react-midi-hooks","owner":"nicorobo","description":"A library of React hooks for integrating MIDI devices into your applications. Effortlessly manage connections and real-time events to create dynamic, MIDI-driven experiences.","archived":false,"fork":false,"pushed_at":"2024-08-09T20:52:10.000Z","size":959,"stargazers_count":33,"open_issues_count":16,"forks_count":15,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-27T03:53:07.322Z","etag":null,"topics":["midi","midi-events","midi-messages","music","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicorobo.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,"zenodo":null}},"created_at":"2019-04-01T06:05:37.000Z","updated_at":"2025-03-27T20:19:38.000Z","dependencies_parsed_at":"2023-01-15T07:16:00.390Z","dependency_job_id":"4a0cc4cd-5f48-4546-a28a-0acbdb433dc2","html_url":"https://github.com/nicorobo/react-midi-hooks","commit_stats":null,"previous_names":["nicorobo/react-midi-hooks","nickroberts404/react-midi-hooks"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/nicorobo/react-midi-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicorobo%2Freact-midi-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicorobo%2Freact-midi-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicorobo%2Freact-midi-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicorobo%2Freact-midi-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicorobo","download_url":"https://codeload.github.com/nicorobo/react-midi-hooks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicorobo%2Freact-midi-hooks/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269417563,"owners_count":24413389,"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-08-08T02:00:09.200Z","response_time":72,"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":["midi","midi-events","midi-messages","music","react","react-hooks"],"created_at":"2024-12-02T19:20:24.015Z","updated_at":"2025-08-08T12:11:22.139Z","avatar_url":"https://github.com/nicorobo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @react-midi/hooks\n\nThis package provides hooks for building MIDI-capable React applications and components.\n\n```\nnpm install --save @react-midi/hooks\n```\n\n## `\u003cMIDIProvider\u003e`\n\nThe `MIDIProvider` component serves as the cornerstone of our MIDI integration, enabling seamless interaction with MIDI devices directly within your React application. By leveraging the Web MIDI API, `MIDIProvider` offers a comprehensive solution for managing MIDI connections, inputs, outputs, and real-time MIDI events, all within a reactively designed context.\n\n`MIDIProvider` is a prerequisite for utilizing any of the other MIDI-related hooks within our library, as they depend on the context it establishes to function correctly.\n\n### Getting Started:\n\nTo begin working with `@react-midi/hooks`, wrap your component tree with `MIDIProvider`:\n\n```ts\nimport { MIDIProvider } from '@react-midi/hooks'\n\nfunction App() {\n  return (\n    \u003cMIDIProvider\u003e\n      \u003cYourMIDIEnabledComponent /\u003e\n    \u003c/MIDIProvider\u003e\n  )\n}\n```\n\n## `useMIDIInputs()`:\n\nThe `useMIDIInputs` hook is designed to simplify the process of accessing and managing MIDI input devices. It provides an interface for obtaining the list of available MIDI inputs, identifying the currently selected input device, and selecting an input device by its ID.\n\n```ts\nconst { input, inputs, selectInput, selectedInputId } = useMIDIInputs()\n\n// Example: Select a MIDI input by ID\nselectInput('desired-input-device-id')\n```\n\n## `useMIDIOutputs()`:\n\nThe `useMIDIOutputs` hook is almost the exact same as `useMIDIInputs`, but handles MIDI outputs instead. It provides an interface for obtaining the list of available MIDI outputs, identifying the currently selected output device, and selecting an output device by its ID.\n\n```ts\nconst { output, outputs, selectOutput, selectedOutputId } = useMIDIOutputs()\n\n// Example: Select a MIDI output by ID\nselectInput('desired-output-device-id')\n```\n\n## `useMIDIOutput()`:\n\nThe `useMIDIOutput` hook provides methods to send MIDI messages (note on, note off, and control change) to the selected MIDI output.\nIt simplifies the process of sending MIDI messages by abstracting the details of constructing MIDI message arrays.\n\n```ts\n// To use this hook in a component to send a 'note on' and 'note off' message\nconst { noteOn, noteOff, cc } = useMIDIOutput()\nnoteOn(60, { velocity: 127, channel: 1 }) // Send 'note on' for note 60 with velocity 127 on channel 1\nnoteOff(60, { channel: 1 }) // Send 'note off' for note 60 on channel 1\ncc(64, 127, 1) // Send control change message with control number 64, value 127, on channel 1\n```\n\n## `useMIDINote()`:\n\nThe `useMIDINote` hook allows you to listen for MIDI note messages and updates its state\nwith the message details if the message matches the specified note and channel filters. If no filters are provided, it will update the state with every note message received.\n\n```ts\n// To use this hook to listen for note C3 (MIDI note number 60) on channel 1\nconst midiNote = useMIDINote({ note: 60, channel: 1 })\nif (midiNote) {\n  console.log(\n    `Note ${midiNote.note} with velocity ${midiNote.velocity} received on channel ${midiNote.channel}`\n  )\n}\n```\n\n## `useMIDINotes()`:\n\nThe `useMIDINotes` hook subscribes to MIDI note messages that satisfy specified filtering criteria (such as note number and channel).\nIt maintains an array of active (i.e., currently pressed) MIDI notes. When a note-on message is received, the note is\nadded to the array. When a note-off message for an active note is received, that note is removed from the array.\nThis allows for tracking of currently active MIDI notes that match the filter.\n\n```ts\n// To use this hook to monitor active notes for MIDI channel 1\nconst activeNotes = useMIDINotes({ channel: 1 })\n// activeNotes will be an array of objects, each representing an active MIDI note on channel 1.\n```\n\n## `useMIDIControl()`:\n\nThe `useMIDIControl` hook listens for MIDI control change (CC) messages and updates its state\nwith the details of the message if it matches the specified control number and channel filters.\nIf no filters are provided, it will update the state with every control change message received.\nThis can be useful for components that need to react to specific control change messages.\n\n```ts\n// To use this hook to listen for control change number 7 on channel 1\nconst midiControl = useMIDIControl({ cc: 7, channel: 1 })\nif (midiControl) {\n  console.log(\n    `Control change ${midiControl.control} with value ${midiControl.value} received on channel ${midiControl.channel}`\n  )\n}\n```\n\n## `useMIDIControls()`:\n\nThe `useMIDIControls` hook listens for MIDI control change messages that match a provided filter,\nand maintains an array of values corresponding to a predefined set of control numbers (`controls`). Each control's\nvalue in the array is updated when a matching control change message is received. This is useful for components\nthat need to keep track of and react to changes in multiple MIDI control values simultaneously.\n\n```ts\n// To use this hook to monitor control changes for MIDI controls 7 and 10 on channel 1\nconst controlValues = useMIDIControls([7, 10], { channel: 1 })\n// controlValues will be an array of two numbers, initially [0, 0], updated with the latest values for controls 7 and 10.\n```\n\n## `useMIDIMessage()`:\n\nThe `useMIDIMessage` hook listens for any MIDI messages and updates its state with the latest message received.\nIt is useful for components that need to react to or display information based on incoming MIDI messages.\n\n```ts\n// To use this hook in a component to display the latest MIDI message\nconst midiMessage = useMIDIMessage()\nif (midiMessage) {\n  console.log(`MIDI message received:`, midiMessage)\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicorobo%2Freact-midi-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicorobo%2Freact-midi-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicorobo%2Freact-midi-hooks/lists"}