Added useMIDIConnectionManager and updated README.md

Author: nicorobo

README.md

@@ -157,7 +157,7 @@ const MIDINoteLog = ({ input }) => {
 
 ### `useMIDIOutput(output)`
 
-`useMIDIOutput()` returns function that can be used to send data to the given output.
+`useMIDIOutput()` returns functions that can be used to send messages to the given output.
 
 -   `noteOn(note, velocity=127, channel=1)`: Sends a note on message to the output, defaulting to a velocity of 127 and channel 1.
 -   `noteOff(note, velocity=127, channel=1)`: Sends a note of message to the output, defaulting to a velocity of 127 and channel 1.
@@ -179,3 +179,18 @@ const MIDIButton = ({ output }) => {
 	return <div onClick={handleClick}>Click me!</div>;
 };
 ```
+
+### `useMIDIConnectionManager(connections)`
+
+Given an array of connections (inputs or outputs), `useMIDIConnectionManager()` returns the first avaliable connection, as well as a function to change the connection by calling it with a connection id.
+
+If a connection is no longer avaliable, or an unavailable id is given, the first avaliable connection will be returned.
+The functions returned can be used to create a selection UI, or used with `<MIDIConnectionManager />` from [@react-midi/components](https://github.com/nickroberts404/react-midi-components).
+
+```js
+const App = () => {
+	const [inputs, outputs] = useMIDI();
+	const [input, setInputId] = useMIDIConnectionManager(inputs);
+	const [output, setOutputId] = useMIDIConnectionManager(outputs);
+};
+```

src/index.js

@@ -72,7 +72,7 @@ const enrichInputs = (inputs) =>
 		return input;
 	});
 
-// By using useConnectInput at the beggining of input hook, we prevent opening/maintaining connections with unused inputs.
+// By using useConnectInput at the beggining of an input hook, we prevent opening/maintaining connections with unused inputs.
 // This may have reprecusions when more than one hook is used for the same input, and one of them unregisters.
 const useConnectInput = (input) => {
 	useEffect(() => {
@@ -82,6 +82,19 @@ const useConnectInput = (input) => {
 	}, [input]);
 };
 
+export const useMIDIConnectionManager = (connections) => {
+	const connectionsAvaliable = connections.length > 0;
+	const [id, setId] = useState(0);
+
+	useEffect(() => {
+		const index = connections.findIndex((c) => c.id === id);
+		// I believe setting the id to 0 here would result in an infinite loop if there actually aren't any connections
+		if (index < 0) setId(connectionsAvaliable ? connections[0].id : 0);
+	}, [connections, id]);
+	const connection = connections.find((i) => i.id === id);
+	return [connection, setId];
+};
+
 export const useMIDIClock = (input, division = 1) => {
 	useConnectInput(input);
 	const [step, setStep] = useState(0);