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.
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.
- 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.
npm install @browser-modules/reactive.collection
- 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);