♻️ refactor the code for friendlier usage and v1 release

Author: Matt Shirley

README.md

@@ -1,5 +1,5 @@
 # react-midi-hook
-Hook to communicate with MIDI devices using MIDIAccess.
+> React hook to easily use MIDI inputs via the Web MIDI API.
 
 ## Install
 
@@ -10,20 +10,22 @@ yarn add --save react-midi-hook
 ## Usage
 
 ```jsx
-import React, { Component } from 'react'
+import React from 'react'
 import useMidi from 'react-midi-hook'
 
 export default function App() {}
-  const { inputs, activeKeys, listenToInputs } = useMidi();
-
-  if (inputs) listenToInputs();
+  const { pressedKeys } = useMidi();
 
   return (
-    <p>{activeKeys[0].letter}</p>
+    <p>{pressedKeys[0].letter}</p>
   );
 }
 ```
 
+# Browser Support
+
+The Web MIDI API is currently only supported on Edge, Chrome and Opera. Please refer to [Can I use](https://caniuse.com/#feat=midi) for up to date information.
+
 ## License
 
 MIT © [matthewshirley](https://github.com/matthewshirley)

example/package.json

@@ -7,7 +7,9 @@
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
     "react-scripts": "link:../node_modules/react-scripts",
-    "react-midi-hook": "link:.."
+    "react-midi-hook": "link:..",
+    "styled-components": "^5.1.0",
+    "styled-system": "^5.1.5"
   },
   "scripts": {
     "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",

example/src/App.js

@@ -1,29 +1,24 @@
 import React from 'react'
 import useMidi from 'react-midi-hook'
+
+import KeyText from './components/KeyText';
+import StartButton from './components/StartButton';
+import InstructionText from './components/InstructionText';
+
 import './index.css';
 
 const App = () => {
-  const { inputs, activeKeys, listenToInputs } = useMidi();
+  const { pressedKeys, inputs, isError, isReady, initialize } = 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>
+  return (
+    <div>
+      <StartButton initialize={initialize} />
+      <div className="note">
+        <KeyText pressedKeys={pressedKeys} />
+        <InstructionText pressedKeys={pressedKeys} inputs={inputs} isReady={isReady} isError={isError} />
+      </div>
+    </div>
+  );
 }
 
 export default App

example/src/components/InstructionText/InstructionText.js

@@ -0,0 +1,29 @@
+import React from "react";
+import Text from "../Text";
+
+const STRINGS = {
+  errorOnAccess: 'Uh oh, the browser is not supported or there was an error',
+  waitingForAccess: 'Waiting for access',
+  waitingForConnection: 'Waiting for device',
+  ready: 'Press a key on your MIDI device',
+}
+
+export default function InstructionText({ pressedKeys, inputs, isReady, isError }) {
+  if (pressedKeys.length > 0) return (null);
+
+  let stringToRender;
+
+  if (isError) {
+    stringToRender = STRINGS['errorOnAccess']
+  } else if (isReady && inputs.length > 0) {
+    stringToRender = STRINGS['ready'];
+  } else if (isReady) {
+    stringToRender = STRINGS['waitingForConnection']
+  } else if (!isReady) {
+    stringToRender = STRINGS['waitingForAccess']
+  }
+
+  return (
+    <Text>{stringToRender}</Text>
+  )
+}

example/src/components/InstructionText/index.js

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

example/src/components/KeyText/KeyText.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Text from '../Text';
+
+export default function KeyText({ pressedKeys }) {
+  if (pressedKeys.length === 0) return (null);
+
+  const keysToRender = pressedKeys.map((key, index) => {
+    const keyNote = key.letter + key.octave;
+
+    if (index === pressedKeys.length - 1) {
+      return (<Text as="h1" key={keyNote} px={2}>{keyNote}</Text>)
+    }
+
+    return (<Text as="h2" key={keyNote} px={2}>{keyNote}</Text>)
+  });
+
+  return keysToRender;
+}

example/src/components/KeyText/index.js

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

example/src/components/StartButton/StartButton.js

@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+import { color, border, layout, space, typography } from "styled-system";
+
+const StyledButton = styled.button`
+  display: inline-block;
+  cursor: pointer;
+  text-transform: capitalize;
+
+  ${color}
+  ${space}
+  ${border}
+  ${layout}
+  ${typography}
+`;
+
+export default function StartButton({ initialize, ...props }) {
+  return (
+    <StyledButton onClick={initialize} {...props}>
+      Connect Devices
+    </StyledButton>
+  );
+}
+
+StartButton.defaultProps = {
+  my: 3,
+  width: "25%",
+  fontSize: 2,
+  fontWeight: "bold",
+  bg: "green",
+  color: "white",
+  height: "48px",
+  lineHeight: "48px",
+  borderStyle: "solid",
+  borderWidth: "1px",
+  textAlign: "center",
+  verticalAlign: "middle",
+};

example/src/components/StartButton/index.js

@@ -0,0 +1 @@
+export { default } from "./StartButton";

example/src/components/Text/Text.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { space, typography } from 'styled-system';
+
+export const Text = styled.p`
+  ${space}
+  ${typography}
+`;
+
+Text.propTypes = {
+  ...typography.propTypes,
+};
+
+Text.defaultProps = {
+  fontSize: 2,
+};
+
+export default Text;

example/src/components/Text/index.js

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

example/src/index.css

@@ -13,19 +13,7 @@ code {
     monospace;
 }
 
-h1 {
-  font-size: 12rem;
-  padding-left: 1rem;
-  padding-right: 1rem; 
-}
-
-h2 {
-  font-size: 10rem;
-  padding-left: 1rem;
-  padding-right: 1rem; 
-}
-
-.main {
+.note {
   display: flex;
   flex-direction: row;
   justify-content: center;