Mitt, an Event Bus library in JavaScript

Mitt is a JavaScript event management library, based on a publish/subscribe pattern that stands out for its simplicity and small size.

Created by Jason Miller, Mitt is a minimalistic and extremely lightweight library. It weighs less than 200 bytes (minified and gzipped).

Mitt has no dependencies, and is particularly useful in small to medium applications where the complexity of larger and heavier libraries is not required.

With Mitt, it is very simple to implement a pattern like an Event Bus (a shared mechanism for components to share messages):

It is a very useful library in many situations, such as for communication between React, Vue, Svelte components, etc.

Basic Usage of Mitt

To start using Mitt, you first need to install it in your project.

npm install mitt

You can also include Mitt directly in your project via a CDN:

<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>

Once you have installed Mitt, you can start using it in your project. Mitt works by creating an “event bus” that allows you to register and listen to custom events.

import mitt from 'mitt';

const emitter = mitt();

emitter.on('greeting', (message) => {
    console.log(message); // "Hello, world!"
});

emitter.emit('greeting', 'Hello, world!');

// Later, when you no longer need the listener
emitter.off('greeting', handler);

emitter.off('greeting');

Practical Example

Let’s see how to put everything together to see how the use of Mitt would work.

import mitt from 'mitt';

// Create an event bus
const emitter = mitt();

// Listen to an event
emitter.on('greeting', (message) => {
  console.log('Received:', message);
});

// Emit the event
emitter.emit('greeting', 'Hello, Mitt!');

Example in a React application

I mentioned that one of the advantages of Mitt is that it allows communication between components, even across different frameworks, where the usual methods would be complicated.

Let’s see this, for example, in a React example. First, we create a global event bus with a Singleton pattern.

To do this, we create a file eventBus.js:

import mitt from 'mitt';

const eventBus = mitt();

export default eventBus;

Now, we can emit events from any component

import eventBus from './eventBus';

const Sender = () => {
  return (
    <button onClick={() => eventBus.emit('message', 'Hello from Sender')}>
      Send Message
    </button>
  );
};

export default Sender;

Now we can listen to events in another component, for example like this,

import { useEffect, useState } from 'react';
import eventBus from './eventBus';

const Receiver = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const handler = (msg) => setMessage(msg);
    
    eventBus.on('message', handler);

    return () => {
      eventBus.off('message', handler);
    };
  }, []);

  return <p>Message received: {message}</p>;
};

export default Receiver;