---

!Npm version
!Build
!Size
!License
!Downloads

windowed-observable is a library for messaging using Observables, making it easier to communicate multiple apps or parts of an app using the window. It exposes an Observable that behaves like a scoped Pub/Sub topic using namespaces.

📦 Installation

``sh
npm install windowed-observable

or

yarn add windowed-observable
`

⌨️ Introduction

An observable look like a pub/sub topic, there are scoped events and observers(listeners) on each namespace, and those namespaces can be cleared, and changed.

🔨 Usages

$3


`ts
import { Observable } from 'windowed-observable';
const observable = new Observable('konoha');
observable.subscribe((ninja) => {
console.log(ninja)
})
observable.publish('Uchiha Shisui');
// > Uchiha Shisui
`

$3

`ts
import { Observable } from 'windowed-observable';

const observable = new Observable('konoha');

observable.publish('Senju Tobirama');

observable.subscribe((ninja) => console.log(ninja), { latest: true });
// > Senju Tobirama
`

$3


`ts
import { Observable } from 'windowed-observable';

const observable = new Observable('konoha');

const observer = (ninja) => console.log(ninja);

observable.subscribe(observer)
observable.publish('Uzumaki Naruto');
// > Uzumaki Naruto

// Unsubscribing
observable.unsubscribe(observer);

// Clearing
observable.clear();
`

$3

Simple react usage

#### Observer component
`tsx
import React, { Component } from 'react';
import { Observable } from 'windowed-observable';

const observable = new Observable('konoha');

class NinjasList extends Component {
state: {
ninjas: []
}

componentDidMount() {
this.observer = (ninja) => {
const ninjas = this.state.ninjas.concat(ninja);

this.setState({ ninjas });
}

observable.subscribe(this.observer);
}

componentWillUnmount() {
observable.unsubscribe(this.observer);
}

render() {
...
// ninjas listing
}
}
`

#### Publisher component

`tsx
import React from 'react';
import { Observable } from 'windowed-observable';

const observable = new Observable('konoha');

const handleClick = ninja => () => observable.publish(ninja);

const AddNinjaButton = ({ ninja }) => (
Add ninja
);
``