evently-react
Version:
A Hook-Based Framework for Event-Driven React Apps
46 lines (45 loc) • 2.8 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { useEvent, useSubscribe } from '../hooks';
import { emitExternalEvent, subscribeExternalEvent, transformTimeEvent } from '../utils/transform';
export const ExampleComponent = () => {
const { emitEvent, eventBus } = useEvent();
const [externalPayload, setExternalPayload] = useState({});
// High-priority subscriber
useSubscribe('test-event', payload => {
console.log('High-priority subscriber:', payload);
}, 3);
// Medium-priority subscriber
useSubscribe('test-event', payload => {
console.log('Medium-priority subscriber:', payload);
}, 2);
// Low-priority subscriber
useSubscribe('test-event', payload => {
console.log('Low-priority subscriber:', payload);
}, 1);
useSubscribe('my-event', payload => {
console.log('[Subscriber] my-event received:', payload);
});
useSubscribe('global-event', payload => {
console.log('[Subscriber] global-event received:', payload);
});
useSubscribe(['time-event', 'global-event'], (eventName, payload) => {
console.log(`MULTI [${eventName}] received:`, payload);
});
const emitButtonEvent = (eventName = '') => {
if (!eventName)
return;
emitEvent(eventName, { message: 'Hello, EventBus!' });
};
const emitTimeEvent = (eventName = '') => {
if (!eventName)
return;
emitEvent(eventName, { time: new Date().toLocaleTimeString(), source: 'example-component' });
};
useEffect(() => {
subscribeExternalEvent('external-event', payload => {
setExternalPayload(payload);
});
}, []);
return (_jsxs("div", { children: [_jsx("button", { onClick: () => emitButtonEvent('my-event'), children: "Emit Event" }), _jsx("button", { onClick: () => emitButtonEvent('global-event'), children: "Global Event" }), _jsx("button", { onClick: () => emitButtonEvent('test-event'), children: "Priority Event" }), _jsxs("div", { style: { marginTop: '1rem', display: 'block', background: 'yellow' }, children: [_jsx("button", { onClick: () => transformTimeEvent('time-event', eventBus), children: "Add middleware to time event" }), _jsx("button", { onClick: () => emitTimeEvent('time-event'), children: "Send current time" })] }), _jsxs("div", { style: { marginBlock: '2rem', display: 'block', background: 'red' }, children: [_jsx("h4", { children: "External Emit Subscribe check" }), _jsx("button", { onClick: () => emitExternalEvent('external-event', { isExternal: true, source: 'react component' }), children: "External non react external emit" }), _jsxs("span", { children: ["Subscribed payload : ", JSON.stringify(externalPayload)] })] })] }));
};