Introduction to React UseMidi

UseMidi is designed as a the foundation for React design systems and component libraries. It sets you up for success in creating accesible, interactive, performant UI that support the custom look and feel of you

Modern React

Made with modern React APIs including function components and hooks. Ready for use with modern React APIs including Concurrent Mode and Server Components.

Modular views and behaviors

UseMidi exports a number of individual modules to support a variety of use cases. Your application can use as many or as few of these modules as needed. The library is designed for incremental adoption strategies.

// React DOM element DOES have event callback props
<div onClick={onClick} />

// UseMidi element DOES NOT have event callback props
const bind = UseNote(state => {});
<div {...bind()}/>

Installation

To install the entire use-midi lib:

npm i use-midi

or

yarn add use-midi

Getting Started

git clone https://github.com/tseijp/use-midi

Run the development server:

cd use-midi
yarn init
yarn start

Your site starts at http://localhost:3000.

Simple example

The following example makes a <button/>

import { useNote } from 'use-midi'

function ClickButton () {
  const bind = useNote(state => {
    state.send?.([0x000, 0x888, 0xfff], 10)
  })
  return <button {...bind}>Send Data to MIDI</button>
}