@reactiff/midi

React library for interfacing with MIDI controllers

Install

Big news! Version 2.0 now supports ColorPaletteEditor!

yarn add @reactiff/midi

Usage

import { useState } from 'react'
import * as ui from '@reactiff/ui-core'
import { MidiColorPaletteEditor } from '@reactiff/midi'
import { MidiProvider } from '@reactiff/midi'

export default const DetachablePaletteEditor = () => {

  const [palette, setPalette] = useState<any>({
    primaryColor: 'royalblue',
    secondaryColor: 'pink',
    danger: 'red',
  })

  const handleChange = (p: any) => {
    setPalette(p)
  }

  return (
    <MidiProvider>
      <ui.row>
        <ui.col>
          <HotPreview palette={palette} />
        </ui.col>
        <ui.col>
          <MidiColorPaletteEditor
            id="demo-detachable-color-palette-editor-with-midi-fast-refresh-and-auto-save"
            palette={palette}
            onChange={setPalette}
            detachable={true}
          />
        </ui.col>
      </ui.row>
    </MidiProvider>
  )
}

You can supply your own Preview, which used the palette, or update the whote Theme to see changes everywhere!

const HotPreview = (props: any) => {
  const { palette } = props
  return (
    <ui.col>
      <ui.div>Header</ui.div>
      <ui.div>
        <p>{ui.loremIpsum.paragraphs(1)}</p>
      </ui.div>
      <ui.div>
        <button>Primary</button>
        <button>Secondary</button>
      </ui.div>
    </ui.col>
  )
}

Events

| Event | Description | | ----- | ----------- | | onTouchStart | Fired when a pad is tapped or a touch starts | | onAfterTouch | Fired in rapid succession reflecting changing pressure, when the pad has and is configured to respond to pressure changes. Check the documentation of your device. | | onTouchEnd | Fired when a pad touch ends | | onNoteOn | Fired for each piano key pressed. If a chord of three notes is played, this event is fired three times | | onNoteOff | Fired for each piano key released | | onParameterChange | Fired as a Rotary Knob is turned. | | onUnknownEvent | This event will be deprecated in the near future. Do not use in production. |

Publishing the package to npm

First time (with free account) if scoped, must set access to public

npm publish --access public

To update

npm version major|minor|patch

and then simply

npm publish

License

MIT © Rick Ellis