lukewestby

import React from 'react';
import { MidiNote, MidiDevice } from 'hypothetical-react-midi';
import partial from 'lodash.partial';

export default function App({ input, output, noteStates, dispatch }) {
  
  function onMessage(note, { command, velocity }) {
    dispatch({
      type: 'MESSAGE_RECIEVED',
      payload: { command, velocity, note }

lukewestby

import React from 'react';
import { MidiDevice } from 'hypothetical-react-midi';
import { render } from 'react-dom';

function App({ input, output }) {
  return (
    <MidiDevice input={input} output={output}>
      // ...
    </MidiDevice>
  );

lukewestby

function findMidiDevices(name) {
  return navigator
    .requestMIDIAccess()
    .then((midiAccess) => {
      let input, output;
      midiAccess.inputs.forEach((currentInput) => {
        if(currentInput.name === name) input = currentInput;
      });
      midiAccess.outputs.forEach((currentOutput) => {
        if(currentOutput.name === name) output = currentOutput;