use-app-events

• Create, trigger and listen for custom events in vanilla JavaScript and React.
• Create the reactive global variables in React instead of a complex state and cumbersome context.

📦 Small package (~22 kB)
🍃 Tree-shakeable
📝 Well documented
🛡️ Strictly typed with TypeScript
♻️ Events interact with each other across different browser tabs
⚛️ Exports a convenient API for React developers

Installation

npm

npm install use-app-events

pnpm

pnpm add use-app-events

API

• useGlobal 🆕
  • Create a reactive global variable in React.
  • For example, as a replacement for React context (createContext)
• useAppEvents
  • Hook for managing application events in React.
• notifyEventListeners
  • Function to notify all listeners of the specified event type(s) subscribed via listenForEvents.
• listenForEvents
  • Function to subscribe and listen for the specified event type(s) to occur in the app.
• listenForEvents.once
  • Function to subscribe and listen for the specified event type(s) to occur in the app only once.
• heap
  • (readonly) Collection of resources operated by the package.
• options
  • Collection of options used to adjust the behavior of the package.

Examples

Imports

Normal

import { useGlobal } from 'use-app-events';

Selective (tree-shakeable)

import notifyEventListeners from 'use-app-events/notifyEventListeners';

State 🆕

Create a reactive global variable in React 🆕

// Global variable name - 'theme'
// Initial value - 'light'
const [theme, updateTheme] = useGlobal('theme', 'light');

// 1. Re-render with the new "dark" value
// 2. Save the theme value globally
updateTheme('dark');

Events

Create your own custom events

// 1. Create a custom event by simply giving it a name
// For example, 'media-resume'
listenForEvents('media-resume', () => {
  // do something when the event is triggered
});

// 2. Now that you have your custom event created with listenForEvents
// Trigger the event by its name
notifyEventListeners('media-resume');

This is a truncated version of README to reduce the package size.

[ See full docs on GitHub ]

License

MIT

Author

Maksym Marchuk