https://github.com/flippiecoetser/reactive.collection

Reactive Collection, including event management, for the browser using ES6 Modules
https://github.com/flippiecoetser/reactive.collection

Last synced: 19 days ago
JSON representation

Reactive Collection, including event management, for the browser using ES6 Modules

• Host: GitHub
• URL: https://github.com/flippiecoetser/reactive.collection
• Owner: FlippieCoetser
• Created: 2024-03-07T08:16:19.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-05-29T08:05:48.000Z (8 months ago)
• Last Synced: 2024-05-29T20:46:29.040Z (8 months ago)
• Language: JavaScript
• Homepage:
• Size: 53.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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`, and `onremove` events to easily sync your UI or other components with your data.

## Getting Started

### Installation

```bash

npm install @browser-modules/reactive.collection

```

### Quick Start

1. Create a Collection

```javascript

import { Collection } from "@browser-modules/reactive.collection";

let actors = Collection.create([

  { id: 1, name: "Actor 1" },

  { id: 2, name: "Actor 2" },

]);

```

2. Set Up Event Handlers

```javascript

let onAddition = (event) => {

  // Access the updated collection directly in the event

  console.log(event.detail.collection);

};

```

3. Listen to Events

```javascript

actors.addEventListener("onadd", onAddition);

```

4. Modify the Collection

```javascript

actors.add({ id: 3, name: "Actor 3" });

```

5. Observe the Output

check the console for the updated collection

4. Clean Up

```javascript

actors.removeEventListener("onadd", onAddition);

```