Super Fast, Lightweight, Simple Observer
npm install cozyobservesh
npm install cozyobserve
`
Or using yarn:
`sh
yarn add cozyobserve
`
---
Vanilla JavaScript / TypeScript Usage
$3
`ts
import {
Observer,
ComputeObserver,
AsyncObserver,
deepObserver,
} from 'cozyobserve';
`
$3
`ts
const observer = new Observer(10);
const unsubscribe = observer.subscribe((newValue, oldValue) => {
console.log(Value changed from ${oldValue} to ${newValue});
});
observer.set(20); // Triggers the callback
// Unsubscribe when no longer needed
unsubscribe();
`
$3
`ts
const computeObserver = new ComputeObserver(() => Math.random());
const unsubscribeCompute = computeObserver.subscribe((newValue, oldValue) => {
console.log(Computed value changed from ${oldValue} to ${newValue});
});
computeObserver.update(); // Triggers the callback if value changed
unsubscribeCompute();
`
$3
`ts
const asyncObserver = new AsyncObserver(
fetch('/api/data').then((res) => res.json())
);
asyncObserver
.promise()
.then((value) => console.log('Async value resolved:', value));
`
$3
`ts
const person = { name: 'Alice', age: 25 };
const { observer, unsubscribe } = deepObserver(person, (newValue, oldValue) => {
console.log('Object changed:', newValue, oldValue);
});
observer.age = 26; // Triggers the callback
unsubscribe(); // Stop observing
`
---
React Usage
CozyObserve provides built-in React hooks to make state management seamless.
$3
`tsx
import {
useObserver,
useComputeObserver,
useAsyncObserver,
useDeepObserver,
Observe,
} from 'cozyobserve';
`
$3
`tsx
import { Observe, Observer } from 'cozyobserve';
const count = new Observer(0);
function Counter() {
return (
{(value) => (
Count: {value}
)}
);
}
`
Observe is a React component that listens to an Observer and re-renders its child function when the value changes.
It makes it easy to work with observers declaratively inside React components.
$3
`tsx
import { Observer, useObserver } from 'cozyobserve';
const counter = new Observer(0);
function Counter() {
const count = useObserver(counter);
return (
Count: {count}
);
}
`
$3
`tsx
import { ComputeObserver, useComputeObserver } from 'cozyobserve';
const randomValue = new ComputeObserver(() => Math.random());
function RandomDisplay() {
const value = useComputeObserver(randomValue);
return (
Random Value: {value}
);
}
`
$3
`tsx
import { AsyncObserver, useAsyncObserver } from 'cozyobserve';
const asyncData = new AsyncObserver(
fetch('/api/data').then((res) => res.json())
);
function AsyncComponent() {
const data = useAsyncObserver(asyncData);
return {data ? JSON.stringify(data) : 'Loading...'};
}
`
$3
`tsx
import { deepObserver, useDeepObserver } from 'cozyobserve';
const person = { name: 'Alice', age: 25 };
const deepObservedPerson = deepObserver(person, (newValue) => {
console.log('Person updated:', newValue);
});
function PersonComponent() {
const observedPerson = useDeepObserver(deepObservedPerson);
return (
Name: {observedPerson.name}
Age: {observedPerson.age}
);
}
``