@therms/react-event-bus 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -89,6 +89,76 @@ Returns an object with the following methods:
|
|
|
89
89
|
* `listen(listener: (payload: Payload) => void)`: Subscribes to the event. Returns an unsubscribe function.
|
|
90
90
|
* `name`: The name of the event.
|
|
91
91
|
|
|
92
|
+
## Example Use Case: Centralized App Events
|
|
93
|
+
|
|
94
|
+
Here's a practical example of organizing events in a centralized object for a map-based application:
|
|
95
|
+
|
|
96
|
+
```typescript
|
|
97
|
+
// events/AppEvents.ts
|
|
98
|
+
import { makeEventNotifier } from '@therms/react-event-bus';
|
|
99
|
+
|
|
100
|
+
type LatLng = { lat: number; lng: number };
|
|
101
|
+
|
|
102
|
+
export const AppEvents = {
|
|
103
|
+
// Content Panel events
|
|
104
|
+
SET_CONTENT_EVENT: makeEventNotifier<{ eventId: string; source: string }>(
|
|
105
|
+
'SET_CONTENT_EVENT',
|
|
106
|
+
),
|
|
107
|
+
SET_CONTENT_LOCATION: makeEventNotifier<{ locationId: string; source: string }>(
|
|
108
|
+
'SET_CONTENT_LOCATION',
|
|
109
|
+
),
|
|
110
|
+
SET_CONTENT_USER: makeEventNotifier<{ userId: string; source: string }>(
|
|
111
|
+
'SET_CONTENT_USER',
|
|
112
|
+
),
|
|
113
|
+
|
|
114
|
+
// Map events
|
|
115
|
+
SET_MAP_CENTER: makeEventNotifier<{ coords: LatLng; zoom?: number; source: string }>(
|
|
116
|
+
'SET_MAP_CENTER',
|
|
117
|
+
),
|
|
118
|
+
SET_MAP_BOUNDS: makeEventNotifier<{ bounds: { ne: LatLng; sw: LatLng }; source: string }>(
|
|
119
|
+
'SET_MAP_BOUNDS',
|
|
120
|
+
),
|
|
121
|
+
};
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
// components/Map.tsx
|
|
126
|
+
import { AppEvents } from '../events/AppEvents';
|
|
127
|
+
|
|
128
|
+
export const Map = () => {
|
|
129
|
+
AppEvents.SET_MAP_CENTER.useEventListener(({ coords, zoom }) => {
|
|
130
|
+
map.flyTo(coords, zoom);
|
|
131
|
+
}, []);
|
|
132
|
+
|
|
133
|
+
AppEvents.SET_MAP_BOUNDS.useEventListener(({ bounds }) => {
|
|
134
|
+
map.fitBounds([bounds.sw, bounds.ne]);
|
|
135
|
+
}, []);
|
|
136
|
+
|
|
137
|
+
return <div id="map" />;
|
|
138
|
+
};
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
// components/LocationCard.tsx
|
|
143
|
+
import { AppEvents } from '../events/AppEvents';
|
|
144
|
+
|
|
145
|
+
export const LocationCard = ({ location }) => {
|
|
146
|
+
const handleClick = () => {
|
|
147
|
+
AppEvents.SET_MAP_CENTER.notify({
|
|
148
|
+
coords: location.coords,
|
|
149
|
+
zoom: 15,
|
|
150
|
+
source: 'LocationCard',
|
|
151
|
+
});
|
|
152
|
+
AppEvents.SET_CONTENT_LOCATION.notify({
|
|
153
|
+
locationId: location.id,
|
|
154
|
+
source: 'LocationCard',
|
|
155
|
+
});
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
return <div onClick={handleClick}>{location.name}</div>;
|
|
159
|
+
};
|
|
160
|
+
```
|
|
161
|
+
|
|
92
162
|
## License
|
|
93
163
|
|
|
94
164
|
MIT
|