@reactivers/hooks Github link@reactivers/hooks NPM link

useEventListener

Introduction

  • useEventListener provides a global event listener for you.
  • You can send any data to any component quickly and easily.
  • You can listen a custom event easily.
///Component A
registerEvent("increase", () => setCounter(old => old + 1))

///Component B
callAllEvents("increase")

Getting Started

  • You need to import useEventListener.

From Collection

import { useEventListener } from "@reactivers/hooks";

From Package

import { useEventListener } from "@reactivers/use-event-listener";

Interfaces

Provider

interface EventListenerProps {
	//A group name for access it anywhere!
	component: string
}

Hook

interface EventListenerResponse {
    removeEvent: (component: string, name: any, id: string) => void;
    registerEvent: (component: string, name: any, event: Function) => EffectCallback;
    registerEventById: (component: string, name: any, id: string, event: any) => EffectCallback;
    callEvent: (component: string, name: any, id: string, parameters?: any) => any;
    callAllEvents: (component: string, name: any, parameters?: any, callback?: any) => any;
}

Example

Example Preview - CodeSandbox