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 2 months 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 (10 months ago)
- Default Branch: main
- Last Pushed: 2025-03-22T09:24:00.000Z (2 months ago)
- Last Synced: 2025-03-22T09:29:12.445Z (2 months ago)
- Topics: event-emitter, event-handling, event-management, event-subscriptions, mitt, react-events, react-hooks, react-utility
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/mitt-react
- Size: 6.84 KB
- Stars: 0
- 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. |
### Types
These types can be imported this way:
```js
import type { EventMap } from "mitt-vue";
```
Here is the list of types used in the package.
```ts
export type EventMap = Record;
export type EventCallback = (...args: any[]) => void;
```
## Contribution
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
## License
This project is licensed under the MIT License.