<div align="center"> <h1>react-windowed-observable</h1>
npm install react-windowed-observable
height="auto"
alt="React Windowed observable"
src="https://res.cloudinary.com/daiqkausy/image/upload/v1596908628/react-windowed-observable.png"
/>
React abstractions over windowed observable.
!Npm version
!Build
!Size
!License
!Downloads
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.
sh
npm install react-windowed-observableor
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
$3
tsx
import { createReactObservable } from 'react-windowed-observable';const { useObservable, ObservableProvider } = createReactObservable('fastCartItems');
function App() {
return (
)
}
function Header() {
const [items, setItems] = useState([]);
const { data: newItem } = useObservable();
useEffect(() => {
setItems((allItems) => allItems.concat(newItem));
}, [newItem])
return (
Store Name
);
}function ItemDetails({ item }) {
const { publish } = useObservable();
return (
{ item.name }
);
}
`$3
tsx
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 (
);
}
function SomeComponent() {
const { data } = useObservable(); // Starts with the initial Data
...
}
`$3
tsx
import { createReactObservable } from 'react-windowed-observable';const {
useObservable,
ObservableProvider
} = createReactObservable('fastCartItems', { latest: true });
function App() {
return (
);
}
function SomeComponent() {
const { data } = useObservable(); // start with the latest event on the the 'fastCartItems' namespace
...
}
``