https://github.com/robinloeffel/sgnls
small, simple signals for the browser and node 🙋🏼
https://github.com/robinloeffel/sgnls
effects observables reactivity refs runes signals state-management typescript
Last synced: 12 months ago
JSON representation
small, simple signals for the browser and node 🙋🏼
- Host: GitHub
- URL: https://github.com/robinloeffel/sgnls
- Owner: robinloeffel
- License: mit
- Created: 2023-12-08T08:51:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-01T12:14:16.000Z (about 2 years ago)
- Last Synced: 2025-07-04T17:27:50.452Z (12 months ago)
- Topics: effects, observables, reactivity, refs, runes, signals, state-management, typescript
- Language: TypeScript
- Homepage:
- Size: 175 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: license.txt
Awesome Lists containing this project
README
# `sgnls`
[](https://www.npmjs.com/package/sgnls)
[](https://www.npmjs.com/package/sgnls)
[](https://www.npmjs.com/package/sgnls)
[](https://github.com/robinloeffel/sgnls/blob/main/license.txt)
> small, simple signals for the browser and node
an easy way to create and use signals in your code base, with a tiny footprint.
## usage
```sh
npm i sgnls
```
```ts
import signal from 'sgnls';
const $favPasta = signal('lasagna');
$favPasta.effect(newValue => {
document.title = `my favorite pasta is ${newValue}`;
});
$favPasta.set('carbonara');
```
## api
### `import`
`sgnls` comes with a straightforward api. it exports one default function, which returns a signal object.
```ts
import signal from 'sgnls';
const $signal = signal('initial value');
```
said object then exposes the following five methods.
### `get`
returns the current value of the signal.
```ts
const $signal = signal('initial value');
$signal.get();
```
### `set`
sets the value of the signal.
```ts
const $signal = signal('initial value');
$signal.set('new value');
```
### `update`
updates the value of the signal by mutating it through a function.
```ts
const $signal = signal(['a', 'b', 'c']);
$signal.update(value => [...value, 'd']);
```
### `effect`
sets up an effect to be called whenever the signal changes.
_note: the effect is called once immediately after the setup!_
```ts
const $signal = signal('initial value');
$signal.effect(newValue => {
console.log(newValue);
});
$signal.set('new value');
```
### `stop`
stops the attached effects from invoking.
```ts
const $signal = signal('initial value');
$signal.stop();
```
## license
mit