Skip to main content

Events

NPM | GitHub

npm install @civet/events

The events module provides advanced event handling functionality.

The DataProvider already has basic support for handling events. However, it is limited to updating all subscribers of a specific resource. If you need more advanced event handling, this is the place to go.

ConfigContext​

React context for providing shared configuration to event components.

Context​

NameTypeDescription
eventReceiverEventReceiver

<ConfigProvider>, <ConfigConsumer>, useConfigContext

<ConfigProvider>​

Context provider for the ConfigContext.

<ConfigProvider eventReceiver={receiver}>...</ConfigProvider>

Props​

NameTypeDescription
eventReceiverEventReceiver

ConfigContext, <ConfigConsumer>, useConfigContext

<ConfigConsumer>​

Context consumer for the ConfigContext.

<ConfigConsumer>
{(context) => ...}
</ConfigConsumer>

ConfigContext, <ConfigProvider>, useConfigContext

useConfigContext​

Context consumer for the ConfigContext.

const context = useConfigContext();

Function arguments​

None

Return type​

TypeDescription
objectConfigContext

ConfigContext, <ConfigProvider>, <ConfigConsumer>

<EventHandler>​

Enables automatic updating for a <Resource> component or useResource hook by subscribing to an EventReceiver.

Necessary configuration that is not directly specified is taken from the ConfigContext and ResourceContext.

onEvent can be used to directly access events allowing you to add custom event logic to your components.

There is also a useEventHandler hook available with similar functionality.

<EventHandler
onEvent={(event) => {
console.log("Received", event);
}}
/>

Props​

NameTypeDescription
optionsobjectOptions for the EventReceiver
disabledbooleanDisables the event handler
onEvent(event: any) => booleanCallback to filter events and handle your own event logic - if true is returned, the event does not cause the resource to update
onNotify({ request: string, revision: string }, events: any[]) => voidProvides information on when the resource has been requested to update - events contains the events that lead to the update
resourceobjectResourceContext to be used
eventReceiverEventReceiverEventReceiver to be used

useEventHandler

useEventHandler​

Enables automatic updating for a <Resource> component or useResource hook by subscribing to an EventReceiver.

Necessary configuration that is not directly specified is taken from the ConfigContext and ResourceContext.

onEvent can be used to directly access events allowing you to add custom event logic to your components.

There is also an <EventHandler> component available with similar functionality.

useEventHandler({
resource,
onEvent: (event) => {
console.log("Received", event);
},
});

Function arguments​

NameTypeDescription
configobjectEvent handler configuration

Event handler configuration​

NameTypeDescription
optionsobjectOptions for the EventReceiver
disabledbooleanDisables the event handler
onEvent(event: any) => booleanCallback to filter events and handle your own event logic - if true is returned, the event does not cause the resource to update
onNotify({ request: string, revision: string }, events: any[]) => voidProvides information on when the resource has been requested to update - events contains the events that lead to the update
resourceobjectResourceContext to be used
eventReceiverEventReceiverEventReceiver to be used

Return type​

TypeDescription
void

<EventHandler>

EventReceiver​

Base class for implementing your own EventReceiver.

class CustomReceiver extends EventReceiver {
handleSubscribe(resource, options, handler) {
...

const unsubscribe = () => {
...
};
return unsubscribe;
}

...
}

const receiver = new CustomReceiver();

Class members​

NameArgumentsReturn TypeDescription
subscriberesource: Resource | Notifier<[Resource]> | undefined, options: object, handler: (events: any[]) => voidunsubscribe: () => voidSubscribe to events

Abstract members​

NameArgumentsReturn TypeDescription
handleSubscriberesource: Notifier<[Resource]>, options: object, handler: (events: any[]) => voidunsubscribe: () => void

Caveats​

Abstract functions​

The function subscribe internally invokes its corresponding abstract counterpart handleSubscribe and performs generic validation on its parameters and return value. Therefore, you should not override it, but implement the abstract handleSubscribe method instead.

isEventReceiver​

Identifies EventReceiver instances.

const receiver = new EventReceiver();

if (!isEventReceiver(receiver)) {
throw new Error("Should be an EventReceiver instance");
}

Function arguments​

NameTypeDescription
eventReceiveranyThe element to be checked

Return type​

TypeDescription
booleanWhether eventReceiver is an instance of EventReceiver

eventPlugin​

Data provider plugin that integrates an event handler into a resource (using a context plugin).

When using this plugin, you can enable events by passing the events prop to your <Resource> component or useResource hook. The events prop can either be a boolean (whether events should be enabled or not) or a Event handler configuration object. resource does not need to be specified, as it is automatically populated.

composeHandlers​

Utility for composing multiple event handlers. Invokes each handler from left to right, but stops immediately when a handler returns true.

const composedHandler = composeHandlers(
(event) => {
console.log("Received", event);
},
(event) => true,
(event) => {
console.log("Never executed");
}
);

Function arguments​

NameTypeDescription
...handlers(event: any) => booleanEvent handlers

Return type​

TypeDescription
(event: any) => booleanComposed handler