# open-observable

> A hook library for subscriber data

Latest version **1.1.17** (published 2026-08-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install open-observable
pnpm add open-observable
yarn add open-observable
bun add open-observable
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.1.17 |
| Published | 2026-08-04 |
| First published | 2021-11-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 96.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | manolo888 |

## Links

- npm: https://www.npmjs.com/package/open-observable
- Repository: https://github.com/Manolo8/open-observable
- Issues: https://github.com/Manolo8/open-observable/issues
- npm.io page: https://npm.io/package/open-observable

## Recent versions

- 1.1.17 (latest) — 2026-08-04
- 1.1.16 — 2023-06-27
- 1.1.15 — 2023-05-17
- 1.1.14 — 2023-05-16
- 1.1.13 — 2023-05-16
- 1.1.12 — 2023-05-16
- 1.1.11 — 2023-04-15
- 1.1.10 — 2023-04-15
- 1.1.9 — 2023-03-05
- 1.1.8 — 2023-03-05
- 1.1.7 — 2023-02-02
- 1.1.6 — 2022-09-24
- 1.1.5 — 2022-07-08
- 1.1.4 — 2022-07-05
- 1.1.3 — 2022-06-21
- … 26 more at https://npm.io/package/open-observable/versions

## README

# OpenObservable

A hook library for subscriber data

## Installation

with npm

```bash
  npm install open-observable
```
Or with yarn
```bash
  yarn add open-observable
```

## Setup 

In the index.js file, wrap your components with GlobalObservable to recognize the observables

``` javascript
root.render(
    <React.StrictMode>
        <GlobalObservable>
            <App />
        </GlobalObservable>
    </React.StrictMode>
);
```

## Hooks

-   useObservable
-   useSubscriber
-   useSubscriberSelector
-   useSubscriberSelectorAsSubscriber
-   useSubscriberEffect
-   useGlobalObservable
-   useAnySubscriberChangeEffect
-   useEmitter
-   useSubscriberGroup

## Components

-   Listen
-   GlobalObservable

## Examples

```tsx
import { Listen, useObservable } from 'open-observable';

const CountingExample: VFC = () => {
    const observable = useObservable(0);

    //only the Listen block rerenders
    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
            <div>
                Current value is: <Listen subscriber={observable.asSubscriber()}>{(value) => value}</Listen>
            </div>
            <button onClick={() => observable.next((old) => old + 1)}>Click</button>
        </div>
    );
};
```

```tsx
import { ISubscriber, useObservable, useSubscriber } from 'open-observable';

const PassingToChildren: VFC = () => {
    const observable = useObservable('testing');

    return <Children _value={observable.asSubscriber()} />;
};

type ChildrenProps = { _value: ISubscriber<string> };

const Children: VFC<ChildrenProps> = ({ _value }) => {
    const value = useSubscriber(_value);

    return <div>{value}</div>;
};
```

```tsx
import { GlobalObservable, GlobalObservableKey, Listen, useGlobalObservable } from 'open-observable';

//keys are created once, outside of the components, and the name must be unique
const themeKey = new GlobalObservableKey<string>('theme', 'light', { store: true, version: 1 });

const App: VFC = () => (
    <GlobalObservable>
        <ThemeSwitch />
    </GlobalObservable>
);

const ThemeSwitch: VFC = () => {
    const theme = useGlobalObservable(themeKey);

    return (
        <button onClick={() => theme.next((old) => (old === 'light' ? 'dark' : 'light'))}>
            <Listen subscriber={theme.asSubscriber()}>{(value) => value}</Listen>
        </button>
    );
};
```

Caution: with `{ store: true }` the value is persisted as plaintext in `localStorage`, so do not persist secrets.

---
_Source: https://npm.io/package/open-observable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._