Vent is a simple publish and subscribe system you can use to communicate between modules independently
npm install @veams/vent[//]: # ({{#wrapWith "content-section"}})
[//]: # ({{#wrapWith "grid-row"}})
[//]: # ({{#wrapWith "grid-col" colClasses="is-col-tablet-l-8"}})
@veams/vent)Vent is a simple publish and subscribe system you can use to communicate between modules independently.
---------------------
`` bash `
npm install @veams/vent --save
` bash `
yarn add @veams/vent
---------------------
Use Vent to trigger events globally and subscribe to it!
` js
import createVent from '@veams/vent';
const Vent = createVent(); // If using the plugin you do not need this and have the functionality available in the namespace (like Veams.Vent)
// Let's add a throttle to the scroll event and trigger that
window.onscroll = Veams.helpers.throttle((e) => {
Vent.publish('scroll', e);
}, 200);
// Now we can easily catch that ...
Vent.subscribe('scroll', () => {
console.log('Throttled scroll captured ... ');
});
`
` js
import createVent from '@veams/vent';
const Vent = createVent(); // If using the plugin you do not need this and have the functionality available in the namespace (like Veams.Vent)
const dataHandler = (data) => {
// Make something with the data ...
console.log('my custom data received by publish(): ', data);
})
Vent.subscribe('custom:event', dataHandler);
Vent.subscribe('resize', () => {
// First we want to publish it, so that dataHandler() will be executeddataHandler()
Vent.publish('custom:event', {
testData: 'My test data'
});
// After that we unsubscribe to make sure that is only executed once`
Vent.unsubscribe('custom:event', dataHandler);
});
Additionally we have a plugin in place giving you the flexibility to use @veams/vent in the Veams eco system. Veams.EVENTS
Veams exposes a global event object () which can be used and extended by this plugin.
The module extends the default EVENTS object of Veams when you pass the option called furtherEvents.
` js
import Veams from '@veams/core';
import VentPlugin from '@veams/vent/lib/plugin/vent';
import EVENTS from './custom-events';
// Intialize core of Veams
Veams.onInitialize(() => {
// Add plugins to the Veams system
Veams.use(VentPlugin, {
furtherEvents: EVENTS
});
});
`
| Option | Type | Default | Description |
|:--- |:---:|:---:|:--- |
| _furtherEvents_ | {Object} | [false] | Add your custom events to the global events object of Veams. |
When enabled the Api provides a way to subscribe and unsubscribe from global events and publish to the subscribers.
#### Vent.subscribe(name:string, callback:function)
_alias: .on()_
* @param {String} name - Event name which you subscribed to.Function
* @param {} callback - The callback function which get executed when event is triggered.
#### Vent.unsubscribe(name:string, callback:function)
_alias: .off()_
* @param {String} name - Event name which you have subscribed to.Function
* @param {} callback - The callback function which is registered.
#### Vent.publish(name:string, obj?:object, scope?:any)
_alias: .trigger()_
* @param {String} name - Event name which you have subscribed to.Object
* @param {} obj - Optional custom data object which you can pass.scope
* @param {} any - Optional scope/context on which you want to execute .call()`.
[//]: # ({{/wrapWith}})
[//]: # ({{/wrapWith}})
[//]: # ({{/wrapWith}})