https://github.com/dai-shi/use-signals

An experimental React hook for TC39 signals
https://github.com/dai-shi/use-signals

Last synced: 19 days ago
JSON representation

An experimental React hook for TC39 signals

• Host: GitHub
• URL: https://github.com/dai-shi/use-signals
• Owner: dai-shi
• License: mit
• Created: 2024-04-10T15:05:38.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-04T00:28:05.000Z (4 months ago)
• Last Synced: 2024-10-02T08:32:13.139Z (about 1 month ago)
• Language: TypeScript
• Size: 289 KB
• Stars: 313
• Watchers: 7
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-signals

[![CI](https://img.shields.io/github/actions/workflow/status/dai-shi/use-signals/ci.yml?branch=main)](https://github.com/dai-shi/use-signals/actions?query=workflow%3ACI)

[![npm](https://img.shields.io/npm/v/use-signals)](https://www.npmjs.com/package/use-signals)

[![size](https://img.shields.io/bundlephobia/minzip/use-signals)](https://bundlephobia.com/result?p=use-signals)

[![discord](https://img.shields.io/discord/627656437971288081)](https://discord.gg/MrQdmzd)

An experimental React hook for [TC39 signals](https://github.com/proposal-signals/proposal-signals)

## Install

```bash

npm install use-signals

```

## Usage

```jsx

import { Signal, useSignal } from 'use-signals';

const counter = new Signal.State(0);

const Counter = () => {

  const count = useSignal(counter);

  const inc = () => counter.set(counter.get() + 1);

  return (

    <>

      
Count: {count}

      

        +1

      

    >

  );

};

```


## Examples

The [examples](examples) folder contains working examples.

You can run one of them with

```bash

PORT=8080 pnpm run examples:01_counter

```

and open  in your web browser.

You can also try them directly:

[01](https://stackblitz.com/github/dai-shi/use-signals/tree/main/examples/01_counter)

[02](https://stackblitz.com/github/dai-shi/use-signals/tree/main/examples/02_jsx)

## Tweets

- https://twitter.com/dai_shi/status/1778085922770497940