https://github.com/edvardchen/use-happy-bus
A React hook to empower React components to communicate with the siblings efficiently
https://github.com/edvardchen/use-happy-bus
Last synced: about 1 year ago
JSON representation
A React hook to empower React components to communicate with the siblings efficiently
- Host: GitHub
- URL: https://github.com/edvardchen/use-happy-bus
- Owner: edvardchen
- License: mit
- Created: 2024-08-08T10:25:19.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-08T12:31:28.000Z (almost 2 years ago)
- Last Synced: 2025-05-01T19:03:44.923Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 78.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Use-Happy-Bus
A React hook to empower React components to communicate with the siblings efficiently
Why?
- Children can communicate with each other without parent knowing
- Suitable for apps without state management libraries
- Scalable and zero dependencies
The code is quite simple. Feel free to copy [it](./src/index.tsx) directly instead of installing via npm
## Usage
```jsx
import React, { useEffect } from "react";
import { useEmit, useListen } from "use-happy-bus";
function ChildA() {
const emit = useEmit();
const onPress = () => {
emit("EVENT_A");
};
return null;
}
function ChildB() {
const { listen } = useEventBus();
useListen("EVENT_A", () => {
// do some thing
});
return null;
}
function Parent() {
return (
<>
>
);
}
```
### Local event bus rather than global one
If you want to isolate the scope of an event bus, use `IsolatedBus`. So that only the children of `IsolatedBus` can communicate with each other via event bus
```jsx
import { IsolatedBus } from "use-happy-bus";
function Parent() {
return (
);
}
```