React Hooks for WebMidi.js
npm install react-riffs


React Hooks + MIDI 🎹 = 🎶 Riffs 🎶
* useMidiInputs
* useClock
* useControl
* useNote
* useNotes
* usePitchbend
React Riffs exposes several hooks for use with the WebMIDI API. It wraps the excellent WebMidi.js, so refer to their documentation for event reference, etc.
In order to make use of Riffs, you first need to invoke the useMidiInputs hook. This will bootstrap WebMidi and return an array of connected Inputs:
``js
let [myInput] = useMidiInputs();
console.log(myInput);
//=> Input {_userHandlers: {...}, _midiInput: MIDIInput, ...}
`
useMidiInputs takes an optional debug flag, which will add listeners to log the following events to the console: noteon, pitchbend, start, stop
`js`
let [myInput] = useMidiInputs({ debug: true });
Once you have your input, you can start reading from your input device. Just remember to pass your input object each time you invoke an event hook.
Each of the following takes an optional channel as the last parameter. If no channel is specified, it will default to 'all'.
js
let [timestamp, isRunning] = useClock(myInput);console.log(timestamp);
//=> 1234.1234567890123
console.log(isRunning);
//=> false
`$3
Returns the integer value of a controlchange event: 0-127
This hook accepts as an optional second parameter, a string indicating the control to listen for. If this is not supplied, it will default to modulationwheelcoarse.
A list of valid control types will be printed to the console if useMidiInputs is initialized with the debug flag.
`js
let mod = useControl(myInput);console.log(mod);
//=> 64
`$3
NOTE: You probably want useNotesnoteon/noteoff event, along with a Boolean flag for whether the note is being played
`js
let [noteEvent, isOn] = useNote(myInput);console.log(noteEvent);
//=> {target: Input, data: Uint8Array(3), type: "noteon", ...}
console.log(isOn);
//=> true
`$3
Returns an array of noteon events for all of the notes currently being played
`js
let pressedKeys = useNotes(myInput);console.log(pressedKeys);
//=> [{target: Input, data: Uint8Array(3), type: "noteon" ...}]
`$3
Returns a float between -1.0 and 1.0 for the current pitchbend value. No bend is 0.0
`js
let bend = usePitchbend(myInput);console.log(bend);
//=> 0
``