# reactive-signal

> English | [简体中文](https://github.com/Tencent/omi/blob/master/packages/reactive-signal/README.CN.md)

Latest version **2.0.1** (published 2024-09-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactive-signal
pnpm add reactive-signal
yarn add reactive-signal
bun add reactive-signal
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score; popular repo.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2024-09-08 |
| First published | 2024-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 70.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13264 |
| Maintainers | dntzhang |

## Links

- npm: https://www.npmjs.com/package/reactive-signal
- Repository: https://github.com/Tencent/omi
- Homepage: http://omijs.org
- Issues: https://github.com/Tencent/omi/issues/
- npm.io page: https://npm.io/package/reactive-signal

## Recent versions

- 2.0.1 (latest) — 2024-09-08
- 2.0.0 — 2024-09-08
- 1.0.4 — 2024-09-03
- 1.0.3 — 2024-02-29
- 1.0.2 — 2024-01-20
- 1.0.1 — 2024-01-18
- 1.0.0 — 2024-01-17
- 1.0.0-alpha0 — 2024-01-17
- 0.0.2 — 2024-01-17

## README

English | [简体中文](https://github.com/Tencent/omi/blob/master/packages/reactive-signal/README.CN.md) 

<p align="center">
<a href="http://omijs.org" target="_blank">
<img src="https://raw.githubusercontent.com/Tencent/omi/master/packages/reactive-signal/icon.svg" width="100" />
</a>
</p>
<h3 align="center">Reactive-Signal</h3>
<p align="center">Reactive Programming in JavaScript(0.6KB) </p>
<p align="center"><a href="https://www.npmjs.org/package/reactive-signal"><img src="https://img.shields.io/npm/v/reactive-signal.svg?style=flat" alt="npm"></a></p>


`Reactive-Signal` is a powerful library for creating reactive data in JavaScript. It provides a set of functions to create signals, computed signals, effects and batch updates. With this library, you can easily build reactive applications where components automatically update when data changes.

## Features

- **Ultra-Lightweight**: The library is incredibly tiny at just 0.6 KB.
- **Easy-to-Use API**: A simple and intuitive API that makes it easy to get started with reactive programming in JavaScript.
- **Reactive Data**: Easily create reactive data signals and computed signals to automatically update components when data changes.
- **Effects**: Define side effects that automatically react to signal changes, making it simple to manage complex application logic.
- **Batch Updates**: Efficiently batch multiple updates into a single update, reducing unnecessary re-renders and improving performance.
- **Component Management**: Built-in functions to set and get active components, making it easy to integrate with your application's component system.
- **Flexible**: Can be used with any JavaScript framework or library, or even in vanilla JavaScript projects.



## Installation

```bash
npm install reactive-signal
```

## Usage

```javascript
import { signal, computed, effect, batch } from 'reactive-signal'

// Create a signal
const count = signal(0)

// Create a computed signal
const doubleCount = computed(() => count.value * 2)

// Create an effect
effect(() => {
  console.log(`Count: ${count.value}, Double Count: ${doubleCount.value}`)
})

// Update the count signal
count.value = 1  // logs: "Count: 1, Double Count: 2"

// Batch multiple updates
batch(() => {
  count.value = 2
  count.value = 3
})  // logs: "Count: 3, Double Count: 6"
```

## API

### `signal(initialValue)`

Creates a signal with an initial value.

```tsx
const count = signal(0)
// Using peek to get the value of the signal without creating a dependency
count.peek() === count.value // true

const todos = signal([])
todos.value.push('Learn Reactive Programming')
// Using update to change the value of the signal and trigger dependency updates
todos.update()
```

### `computed(fn)`

Creates a computed signal based on a function.

### `effect(fn)`

Creates an effect based on a function.

### `batch(fn)`

Batches multiple updates into a single update.

### `setActiveComponent(component, updateFnName)`

Sets the active component.

* component: Component - The component object to set as the active component.
* updateFnName?: string - (Optional) The name of the function in the component to use for updates. If not provided, the default value is `queuedUpdate`.

### `clearActiveComponent()`

Clear the active component.

### `getActiveComponent()`

Returns the active component.



## Inspired by

* [@preact/signals](https://preactjs.com/guide/v10/signals/)

## License

MIT © Tencent

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