https://github.com/luqmanoop/react-mitt

React event emitter / pubsub 👉🏻👈🏽
https://github.com/luqmanoop/react-mitt

eventemitter events mitt pubsub react typescript

Last synced: 3 months ago
JSON representation

React event emitter / pubsub 👉🏻👈🏽

• Host: GitHub
• URL: https://github.com/luqmanoop/react-mitt
• Owner: luqmanoop
• License: mit
• Created: 2020-06-06T18:03:34.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-06-07T14:17:34.000Z (over 4 years ago)
• Last Synced: 2024-07-30T20:06:06.931Z (6 months ago)
• Topics: eventemitter, events, mitt, pubsub, react, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-mitt
• Size: 973 KB
• Stars: 30
• Watchers: 1
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# react-mitt

> React event emitter / pubsub





	



A react wrapper for the awesome [mitt](https://github.com/developit/mitt) library

Live demo https://codesandbox.io/s/react-mitt-demo-n11ii

## Install

```sh

$ npm install react-mitt

```

## Usage

Wrap your app in the `MittProvider` component, providing descendants access to the `useMitt` hook for event pubsub

```jsx

import { MittProvider } from "react-mitt"

function App() {

  return (

    

      

      

    

  )

}

```

## Example

Once you wrap your app with the `MittProvider` as demonstrated [above](https://github.com/codeshifu/react-mitt#usage), event pubsub becomes a breeze with the `useMitt` hook

```jsx

import { useMitt } from 'react-mitt'

function ComponentA() {

  const { emitter } = useMitt()

  const handleClick = () => {

    emitter.emit('foo', { data: 'ComponentA says foo!'})

  }

  return emit!

}

function ComponentB() {

  const { emitter } = useMitt()

  useEffect(() => {

    // listen and respond to 'foo' events

    emitter.on('foo', event => alert(event.data))

  }, [])

  return ...

}

```

## Hook

The `useMitt` hook has the following signature

```js

const { emitter } = useMitt()

```

For usage of the **emitter** object, see **mitt** API [docs](https://github.com/developit/mitt#api)

## License

[MIT License](https://github.com/codeshifu/react-mitt/blob/master/license)