# @noxy/react-subscription-hook

> A react component hook to create subscribable values inside components in the style of context.

Latest version **1.1.0** (published 2023-03-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @noxy/react-subscription-hook
pnpm add @noxy/react-subscription-hook
yarn add @noxy/react-subscription-hook
bun add @noxy/react-subscription-hook
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-03-22 |
| First published | 2023-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | oscelest |
| Maintainers | noxy |

## Links

- npm: https://www.npmjs.com/package/@noxy/react-subscription-hook
- Repository: https://github.com/oscelest/react-subscription-hook
- Homepage: https://github.com/oscelest/react-subscription-hook#readme
- Issues: https://github.com/oscelest/react-subscription-hook/issues
- npm.io page: https://npm.io/package/@noxy/react-subscription-hook

## Recent versions

- 1.1.0 (latest) — 2023-03-22
- 1.0.1 — 2023-03-22
- 1.0.0 — 2023-03-21
- 0.3.1 — 2023-03-12
- 0.3.0 — 2023-03-06
- 0.2.7 — 2023-03-06
- 0.2.6 — 2023-03-06
- 0.2.5 — 2023-03-04
- 0.2.3 — 2023-03-04
- 0.2.4 — 2023-03-04
- 0.2.0 — 2023-03-04
- 0.1.3 — 2023-03-04
- 0.1.2 — 2023-03-04

## README

# react-subscription-hook

## Introduction

`react-subscription-hook` is a [React](https://reactjs.org/) functional component hook which creates a subscription object that can be used with the useSubscription hook.
This allows for data to be shared between components by using the same subscription object.
Each being updated as another has their state updated.

## Installation

To install run the following command:

```shell
npm install @noxy/react-subscription-hook@latest
```

Typescript types are already available in the library so no need to get external types.

## Usage

The following is an example of how to use the component:

```typescript jsx
import {createSubscription, useSubscription, trackSubscription} from "@noxy/react-subscription-hook";
import React, {HTMLProps, useContext} from "react";

const subscription = createSubscription<number>(0);

function TestComponent(props: HTMLProps<HTMLDivElement>) {
  const [value, setValue] = useSubscription(subscription);
  const [other] = useSubscription(subscription);
  
  trackSubscription(subscription, value => console.log(value));
  
  return (
    <>
      <div>
        <button onClick={onButtonValueClick}>Add one</button>
        <button onClick={onButtonOtherClick}>Add two</button>
      </div>
      <div>
        <span>Current value:</span>
        <span>{value}</span>
      </div>
      <div>
        <span>Another value:</span>
        <span>{other}</span>
      </div>
    </>
  );
  
  function onButtonValueClick() {
    setValue(value + 1);
  }
  
  function onButtonOtherClick() {
    setValue((state) => state + 2);
  }
}

```

The `createSubscription` creates a `Subscription` object with an initial value that can be used with the useSubscription hook.
`useSubscription` takes a `Subscription` object to return a tuple containing the current value and a value updating function.
`trackSubscription` takes a `Subscription` object and a callback function. The callback is called whenever the underlying subscription value changes.

---
_Source: https://npm.io/package/@noxy/react-subscription-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._