@browser-modules/reactive.collection
v1.0.0
Published
An ES6 module providing a reactive array-like collection with event emission for additions, updates, and removals, ideal for dynamic UI updates and data-driven applications.
Downloads
1
Readme
Reactive Collection
Enhance your data arrays with reactivity. The Reactive Collection library enables arrays to emit events upon modifications, making it indispensable for developing dynamic, data-driven applications. Perfect for integrating with UI frameworks or any scenario requiring real-time data synchronization.
Why This Library?
The Reactive Collection provides a seamless way to observe changes in your data, emitting events on additions, updates, and removals. This functionality is particularly beneficial for visual data representations that need to update automatically, such as with D3 visualizations, without manual refreshes or polling.
Features
- Reactive Operations: Perform standard array operations while automatically emitting events for changes.
- Custom Methods: Utilize enhanced methods like
.add()
and.remove()
for clearer, more expressive code. - Unique Identification: Every collection comes with a unique identifier, simplifying tracking across your application.
- Event-Driven: Listen to
onadd
,onupdate
, andonremove
events to easily sync your UI or other components with your data.
Getting Started
Installation
npm install @browser-modules/reactive.collection
Quick Start
- Create a Collection
import { Collection } from "@browser-modules/reactive.collection";
let actors = Collection.create([
{ id: 1, name: "Actor 1" },
{ id: 2, name: "Actor 2" },
]);
- Set Up Event Handlers
let onAddition = (event) => {
// Access the updated collection directly in the event
console.log(event.detail.collection);
};
- Listen to Events
actors.addEventListener("onadd", onAddition);
- Modify the Collection
actors.add({ id: 3, name: "Actor 3" });
- Observe the Output
check the console for the updated collection
- Clean Up
actors.removeEventListener("onadd", onAddition);