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

Lightweight utility for integrating mitt with React
https://github.com/svnrnns/mitt-react

event-emitter event-handling event-management event-subscriptions mitt react-events react-hooks react-utility

Last synced: about 1 month ago
JSON representation

Lightweight utility for integrating mitt with React

• Host: GitHub
• URL: https://github.com/svnrnns/mitt-react
• Owner: svnrnns
• License: mit
• Created: 2024-07-22T11:08:35.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-11T11:17:54.000Z (5 months ago)
• Last Synced: 2024-11-25T03:20:53.851Z (about 1 month ago)
• Topics: event-emitter, event-handling, event-management, event-subscriptions, mitt, react-events, react-hooks, react-utility
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/mitt-react
• Size: 6.84 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Mitt React

`mitt-react` is a lightweight utility for integrating the mitt event emitter with React functional components. It provides hooks for listening to and emitting events in a React-friendly way. 


In more detail, this package offers a hook that automatically handles event subscription and unsubscription using the `useEffect` hook. This simplifies the process of managing event listeners in React components, ensuring they are properly set up and cleaned up to avoid memory leaks.

## Installation

```bash

npm install mitt-react

```

## Usage

### useEventListener (hook)

The `useEventListener` hook allows you to listen to custom events in your React components.

```jsx

import React, { useState } from 'react';

import { useEventListener } from 'mitt-react';

const MyComponent = () => {

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

  useEventListener('customEvent', (data) => {

    setMessage(data);

  });

  return (

    


      
{message}

    

  );

};


export default MyComponent;

```

### useEventEmit (function)

The `useEventEmit` function allows you to emit custom events.

```jsx

import React from 'react';

import { useEventEmit } from 'mitt-react';

const MyEmitterComponent = () => {

  const handleClick = () => {

    useEventEmit('customEvent', 'Hello, World!');

  };

  return Emit Event;

};

export default MyEmitterComponent;

```

## API

### useEventListener

A hook to listen for a custom event.

| Param     | Type     | Nullable | Desc                                            |

| --------- | -------- | -------- | ----------------------------------------------- |

| eventName | string   | ✗  | The name of the event to listen for             |

| handler   | Function | ✗  | The function to call when the event is emitted. |

### useEventEmit

A function to emit a custom event.

| Param     | Type   | Nullable | Desc                                   |

| --------- | ------ | -------- | -------------------------------------- |

| eventName | string | ✗  | The name of the event to emit.         |

| data      | any    | ✗  | The data to pass to the event handler. |

## Contribution

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

## License

This project is licensed under the MIT License.