Skip to main content


use-midi is a library that let you bind midi events to any component.


 version  codecov  Downloads  jsDelivr  minified size  types includes  license


To install the entire use-midi lib:

yarn add use-midi

npm i use-midi

Getting started

git clone

Run the development server:

cd use-midi
yarn init
yarn start

Documentation and Examples

More info about the project can be found here.

Examples and tutorials can be found here

What does it look like?

React javascript
import { useNote } from 'use-midi'

function Example() {
// Set the note hook
const bind = useNote((state) => {/*~~*/})

// Bind it to a component
return <div {...bind()} />
Vanilla javascript
// script.js
const target = document.getElementById('drag')
const noteMidi = new NoteMidi(target, (state) => {/*~~*/})

// when you want to remove the listener

Available hooks

use-midi exports several hooks that can handle different midi:

useFadeHandles the fade midi
useNoteHandles the note midi
useTurnHandles the turn midi
useMidiHandles multiple midi in the one hooks

More on the full documentation website...