🎉 Initial commit

Author: Matt Shirley

.prettierrc

@@ -1,7 +1,7 @@
 {
   "singleQuote": true,
   "jsxSingleQuote": true,
-  "semi": false,
+  "semi": true,
   "tabWidth": 2,
   "bracketSpacing": true,
   "jsxBracketSameLine": false,

.travis.yml

@@ -1,27 +1,26 @@
 # react-midi-hook
-
-> Made with create-react-library
-
-[![NPM](https://img.shields.io/npm/v/react-midi-hook.svg)](https://www.npmjs.com/package/react-midi-hook) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+Hook to communicate with MIDI devices using MIDIAccess.
 
 ## Install
 
 ```bash
-npm install --save react-midi-hook
+yarn add --save react-midi-hook
 ```
 
 ## Usage
 
 ```jsx
 import React, { Component } from 'react'
+import useMidi from 'react-midi-hook'
+
+export default function App() {}
+  const { inputs, activeKeys, listenToInputs } = useMidi();
 
-import MyComponent from 'react-midi-hook'
-import 'react-midi-hook/dist/index.css'
+  if (inputs) listenToInputs();
 
-class Example extends Component {
-  render() {
-    return <MyComponent />
-  }
+  return (
+    <p>{activeKeys[0].letter}</p>
+  );
 }
 ```
 

README.md

@@ -1,10 +1,29 @@
 import React from 'react'
-
-import { ExampleComponent } from 'react-midi-hook'
-import 'react-midi-hook/dist/index.css'
+import useMidi from 'react-midi-hook'
+import './index.css';
 
 const App = () => {
-  return <ExampleComponent text="Create React Library Example 😄" />
+  const { inputs, activeKeys, listenToInputs } = useMidi();
+  
+  if (!inputs) {
+    return <p>There are no detected devices.</p>
+  } else {
+    listenToInputs();
+  }
+  
+  const keysToRender = activeKeys.map((key, index) => {
+    const keyNote = key.letter + key.octave;
+
+    if (index === activeKeys.length - 1) {
+      return (<h1 key={keyNote}>{keyNote}</h1>)
+    }
+
+    return (<h2 key={keyNote}>{keyNote}</h2>)
+  });
+
+  const instructions = <p>Press a key on your keyboard</p>
+
+  return <div className="main">{keysToRender.length ? keysToRender : instructions}</div>
 }
 
 export default App

example/src/App.js

@@ -12,3 +12,23 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+h1 {
+  font-size: 12rem;
+  padding-left: 1rem;
+  padding-right: 1rem; 
+}
+
+h2 {
+  font-size: 10rem;
+  padding-left: 1rem;
+  padding-right: 1rem; 
+}
+
+.main {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}

example/src/index.css

@@ -0,0 +1,19 @@
+export const NOTE_OFF = 'NOTE_OFF';
+export const NOTE_ON = 'NOTE_ON';
+export const POLY_KEY_PRESSURE = 'POLY_KEY_PRESSURE';
+export const CONTROL_CHANGE = 'CONTROL_CHANGE';
+export const PROGRAM_CHANGE = 'PROGRAM_CHANGE';
+export const MONO_KEY_PRESSURE = 'MONO_KEY_PRESSURE';
+export const PITCH_BEND = 'PITCH_BEND';
+export const SYSTEM = 'SYSTEM';
+
+export default {
+  NOTE_OFF,
+  NOTE_ON,
+  POLY_KEY_PRESSURE,
+  CONTROL_CHANGE,
+  PROGRAM_CHANGE,
+  MONO_KEY_PRESSURE,
+  PITCH_BEND,
+  SYSTEM
+};

src/constants/commands.js

@@ -0,0 +1,16 @@
+export const NOTES = [
+  'A',
+  'A#',
+  'B',
+  'C',
+  'C#',
+  'D',
+  'D#',
+  'E',
+  'F',
+  'F#',
+  'G',
+  'G#'
+];
+
+export default NOTES;

src/constants/notes.js

@@ -0,0 +1,57 @@
+import COMMANDS from '../../constants/commands';
+
+import { useCallback, useState } from 'react';
+import { getNoteLetter, getMIDICommand } from '../../utils/conversions';
+
+export default function useHandleOnMessage(inputs) {
+  const [activeKeys, setActiveKeys] = useState([]);
+
+  const noteOn = useCallback(
+    ({ position, velocity }) => {
+      const octave = parseInt(position / 12 + 1, 10);
+      const letter = getNoteLetter(position % 12);
+
+      return setActiveKeys((keysStillPressed) => [
+        ...keysStillPressed,
+        { position, octave, letter, velocity }
+      ]);
+    },
+    [setActiveKeys]
+  );
+
+  const noteOff = useCallback(
+    ({ position }) => {
+      return setActiveKeys((keysStillPressed) => [
+        ...keysStillPressed.filter((key) => key.position !== position)
+      ]);
+    },
+    [setActiveKeys]
+  );
+
+  const onMidiMessage = useCallback(
+    (event) => {
+      const [command, note, velocity] = event.data;
+
+      const position = note - 21;
+      const type = getMIDICommand(command);
+
+      if (type === COMMANDS.NOTE_ON) return noteOn({ position, velocity });
+      if (type === COMMANDS.NOTE_OFF) return noteOff({ position });
+    },
+    [noteOn, noteOff]
+  );
+
+  const listenToInputs = useCallback(() => {
+    if (!inputs) throw new Error('Caught.NoInput');
+
+    for (
+      let input = inputs.next();
+      input && !input.done;
+      input = inputs.next()
+    ) {
+      input.value.onmidimessage = onMidiMessage;
+    }
+  }, [inputs, onMidiMessage]);
+
+  return { listenToInputs, activeKeys };
+}

src/hooks/useHandleOnMessage/useHandleOnMessage.js

@@ -0,0 +1 @@
+export { default } from './useInputs'

src/hooks/useInputs/index.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+
+export default function useInputs() {
+  const [inputs, setInputs] = useState(null)
+
+  useEffect(() => {
+    navigator.requestMIDIAccess({ sysex: true }).then(
+      (event) => setInputs(event.inputs.values()),
+      (event) => console.warn('error')
+    )
+  }, [setInputs])
+
+  return inputs
+}