react-windowed-observable is a react library for messaging using Observables, making it easier to communicate multiple apps or parts of an app using the window.

📦 Installation

npm install react-windowed-observable

# or

yarn add react-windowed-observable

⌨️ Introduction

It exposes a hook to use and publish data using an Observable;

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

Basic example

import { createReactObservable } from 'react-windowed-observable';

const { useObservable, ObservableProvider } = createReactObservable('fastCartItems');

function App() {
  return (
    <ObservableProvider>
      <Header />
      <ItemDetails />
    </ObservableProvider>
  )
}

function Header() {
  const [items, setItems] = useState([]);
  const { data: newItem } = useObservable();

  useEffect(() => {
    setItems((allItems) => allItems.concat(newItem));
  }, [newItem])

  return (
    <div>
     <h1>Store Name</h1>
     <Cart items={items}/>
    </div>
  );
}

function ItemDetails({ item }) {
  const { publish } = useObservable();

  return (
    <div>
     <h1>{ item.name }</h1>
     <button onClick={() => publish(item)}> Add to cart </button>
    </div>
  );
}

Initial data

import { createReactObservable } from 'react-windowed-observable';

const initialItem = {
  name: 'Mouse Gamer',
  price: 120,
  quantity: 3
};

const {
  useObservable,
  ObservableProvider
} = createReactObservable('fastCartItems', { initialData: initialItem });

function App() {
  return (
    <ObservableProvider>
      <SomeComponent />
    </ObservableProvider>
  );
}

function SomeComponent() {
  const { data } = useObservable(); // Starts with the initial Data
  ...
}

Retrieving latest event

import { createReactObservable } from 'react-windowed-observable';

const {
  useObservable,
  ObservableProvider
} = createReactObservable('fastCartItems', { latest: true });

function App() {
  return (
    <ObservableProvider>
      <SomeComponent />
    </ObservableProvider>
  );
}

function SomeComponent() {
  const { data } = useObservable(); // start with the latest event on the the 'fastCartItems' namespace

  ...
}