https://github.com/faustienf/subscription-stack
📬 Register a subscription in LIFO stack
https://github.com/faustienf/subscription-stack
lifo react stack subscriptions
Last synced: about 1 year ago
JSON representation
📬 Register a subscription in LIFO stack
- Host: GitHub
- URL: https://github.com/faustienf/subscription-stack
- Owner: faustienf
- License: mit
- Created: 2022-07-01T19:10:13.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-21T18:18:11.000Z (almost 4 years ago)
- Last Synced: 2025-03-19T12:39:30.518Z (about 1 year ago)
- Topics: lifo, react, stack, subscriptions
- Language: TypeScript
- Homepage: https://codesandbox.io/s/github/faustienf/subscription-stack
- Size: 555 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# subscription-stack
[](https://npmjs.org/package/subscription-stack)
📬 Register a subscription in LIFO stack
## Installation
```bash
npm i subscription-stack
```
## Usage
```js
// 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
```js
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
```js
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
```js
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();
```