react-midi-context

The easiest way to work with MIDI in React

Features

• TypeScript Support: Includes TypeScript definitions for a smoother development experience.
• Public Storybook: Explore and interact with the components live at react-midi-context.danberman.dev.
• Examples: Ready-to-use examples in the src/lib/Examples folder.

Installation

To install react-midi-context, use npm, Yarn, or pnpm:

npm install react-midi-context

or with Yarn:

yarn add react-midi-context

or with pnpm:

pnpm add react-midi-context

If you're using TypeScript you may also want to install @types/webmidi as a dev dependency.

Usage

Wrap your app in the MIDIProvider

Example

import { MIDIProvider } from 'react-midi-context'
import { App } from './app'
export const WrappedApp = () => {
  return (
    <MIDIProvider onError={console.error}>
      <App />
    </MIDIProvider>
  )
}

Then use the hooks provided in your components

Example

const SendCCRange = () => {
  const sendMIDICC = useMIDIContext((cv) => cv.sendMIDICC)
  const midiOutputs = useMIDIContext((cv) => cv.midiOutputs)
  const device = Object.values(midiOutputs)[0]
  const [value, setValue] = useState(0)
  if (!device) return <>No device found, sorry</>
  return (
    <label style={{ display: 'flex', flexFlow: 'column', width: 'max-content', maxWidth: '100%' }}>
      <br />
      Current value: {value}
      <input
        type="range"
        min="0"
        max="127"
        value={value}
        onChange={(e) => {
          sendMIDICC({ channel: 0, cc: 0, value: parseInt(e.currentTarget.value), device })
          setValue(parseInt(e.currentTarget.value))
        }}
      />
    </label>
  )
}

Repository Structure

• src/: Contains the main library code, including hooks, utilities, and examples.
• storybook-static/: Pre-built Storybook files for live previews.
• coverage/: Code coverage reports generated by tests.
• backup/: Backup files for development.

Public Storybook

Explore and interact with the react-midi-context components in our publicly available Storybook at react-midi-context.danberman.dev. This is a great way to see the components in action and understand how different styles and props affect their appearance.

Testing and Development

This project uses pnpm as the preferred package manager. To get started:

1. Install dependencies:

   pnpm install

2. Run the development server:

   pnpm dev

3. Run tests:

   pnpm test

4. Build the project:

   pnpm build

Contributing

To contribute to react-midi-context:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature).
3. Make your changes.
4. Commit your changes (git commit -am 'Add new feature').
5. Push to the branch (git push origin feature/your-feature).
6. Create a Pull Request on GitHub.

License

react-midi-context is licensed under the ISC License. See the LICENSE file for more details.

Additional Resources

• GitHub Repository – Source code and issue tracking.

Thank you for choosing react-midi-context!