subscription-stack
v1.2.2
Published
Register a subscription in LIFO stack.
Downloads
15
Maintainers
Readme
subscription-stack
📬 Register a subscription in LIFO stack
Installation
npm i subscription-stack
Usage
// 0. Import factory
import { createSubscriptionStack } from 'subscription-stack';
// 1️. Create scoped stack
const stack = createSubscriptionStack();
// 2️. Pass subscribe function
stack(() => {
// 3️. Return unsubscribe function
return () => {};
});
Example
import { createSubscriptionStack } from 'subscription-stack';
const stack = createSubscriptionStack();
stack(() => {
const handle = () => console.log('1️⃣');
window.addEventListener('click', handle);
return () => window.removeEventListener('click', handle);
});
stack(() => {
const handle = () => console.log('2️⃣');
window.addEventListener('click', handle);
return () => window.removeEventListener('click', handle);
});
// Console:
// 2️⃣
// 1️⃣
⚛️ React Hook
import { createSubscriptionStackHook } from 'subscription-stack/react';
const useStack = createSubscriptionStackHook();
useStack(() => {
const handle = () => console.log('1️⃣');
window.addEventListener('click', handle);
return () => window.removeEventListener('click', handle);
});
useStack(() => {
const handle = () => console.log('2️⃣');
window.addEventListener('click', handle);
return () => window.removeEventListener('click', handle);
});
// Console:
// 2️⃣
// 1️⃣
How does it work
const queue = new Set(); // []
// Add 1 -> [1]
stack(() => {
queue.add(1);
return () => queue.delete(1);
});
// Delete 1 -> []
// Add 2 -> [2]
// Add 1 -> [2, 1]
const unsubscribe = stack(() => {
queue.add(2);
return () => queue.delete(2);
});
// Delete 2 -> [1]
// Delete 1 -> []
// Add 3 -> [3]
// Add 2 -> [3, 2]
// Add 1 -> [3, 2, 1]
stack(() => {
queue.add(3);
return () => queue.delete(3);
});
// Delete 2 -> [3, 1]
unsubscribe();