https://github.com/cool-hooks/react-custom-events-hooks
🙌 Create custom events. Fast, simple, fun!
https://github.com/cool-hooks/react-custom-events-hooks
emitter events hooks listener observable react signals
Last synced: 3 months ago
JSON representation
🙌 Create custom events. Fast, simple, fun!
- Host: GitHub
- URL: https://github.com/cool-hooks/react-custom-events-hooks
- Owner: cool-hooks
- License: mit
- Created: 2020-09-18T18:08:06.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T14:47:09.000Z (over 3 years ago)
- Last Synced: 2025-12-26T06:48:37.999Z (7 months ago)
- Topics: emitter, events, hooks, listener, observable, react, signals
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-custom-events-hooks-i9eu2
- Size: 1.15 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# [react-custom-events-hooks](https://github.com/cool-hooks/react-custom-events-hooks)
[](https://www.npmjs.com/package/react-custom-events-hooks)
[](https://www.npmjs.com/package/react-custom-events-hooks)
[](https://www.npmjs.com/package/react-custom-events-hooks)
[](https://codecov.io/gh/cool-hooks/react-custom-events-hooks)
[](https://travis-ci.org/cool-hooks/react-custom-events-hooks)
[](https://bundlephobia.com/result?p=react-custom-events-hooks)
## About
Create custom events. Fast, simple, fun!
### Demo
**[Playground – play with the library in CodeSandbox](https://codesandbox.io/s/react-custom-events-hooks-i9eu2)**
### Alternatives
- [react-custom-events-hooks](https://github.com/HarshRohila/react-custom-events-hooks) by [Harsh Rohila](https://github.com/HarshRohila)
- [@use-it/event-listener](https://github.com/donavon/use-event-listener) by [Donavon West](https://github.com/donavon)
- [react-event-hooks](https://github.com/Eldorean/react-events-hooks) by [Silvester Wilson Wennekers](https://github.com/Eldorean)
## How to Install
First, install the library in your project by npm:
```sh
$ npm install react-custom-events-hooks
```
Or Yarn:
```sh
$ yarn add react-custom-events-hooks
```
## Getting Started
**• Import hooks in React application file:**
```js
import {
useCustomEvent,
useEmitter,
useListener,
} from 'react-custom-events-hooks';
```
#### Example
```js
import React, { useState } from 'react';
import {
useCustomEvent,
useEmitter,
useListener,
} from 'react-custom-events-hooks';
/* ------ Emit + Listen Example ------ */
const EmitListenExample = () => {
const [message, setMessage] = useState('');
const callMyEvent = useCustomEvent({
eventName: 'myAwesomeCustomEvent',
onSignal: (e) => setMessage(e.detail.message),
});
return (
<>
{message}
callMyEvent({ message: 'Hello World!' })}>
Say Hello!
>
);
};
/* ------ Only Emit Example 1 ------ */
const EmitExample = () => {
const callMyEvent = useCustomEvent({
eventName: 'myAwesomeCustomEvent',
});
return (
<>
callMyEvent({ message: 'Hello World!' })}>
Say Hello!
>
);
};
/* ------ Only Emit Example 2 ------ */
const EmitExample = () => {
const callMyEvent = useEmitter('myAwesomeCustomEvent');
return (
<>
callMyEvent({ message: 'Hello World!' })}>
Say Hello!
>
);
};
/* ------ Only Listen Example 1 ------ */
const ListenExample = () => {
const [message, setMessage] = useState('');
useCustomEvent({
eventName: 'myAwesomeCustomEvent',
onSignal: (e) => setMessage(e.detail.message),
});
return (
<>
{message}
>
);
};
/* ------ Only Listen Example 2 ------ */
const ListenExample = () => {
const [message, setMessage] = useState('');
useListener('myAwesomeCustomEvent', (e) => setMessage(e.detail.message));
return (
<>
{message}
>
);
};
```
## License
This project is licensed under the MIT License © 2020-present Jakub Biesiada