Signal API reference for Signal in Semantic UI's reactivity system box Guide

Signal

Signal is the core class for creating signals in Semantic UI’s reactivity system. It allows you to create values that can be observed and will trigger reactions when changed.

Constructor

Creates a new reactive variable with the given initial value.

Syntax

new Signal(initialValue, options);

Parameters

NameTypeDescription
initialValueanyThe initial value of the reactive variable
optionsObject(Optional) Configuration options

Options

NameTypeDefaultDescription
equalityFunctionFunctionisEqualCustom function to determine if the value has changed
allowClonebooleantrueWhether to clone the value when getting/setting
cloneFunctionFunctioncloneCustom function to clone the value

Usage

Basic Usage

import { Signal } from '@semantic-ui/reactivity';


const counter = new Signal(0);

Custom Equality Function

import { Signal } from '@semantic-ui/reactivity';


const person = new Signal({ name: 'John', age: 30 }, {
  equalityFunction: (a, b) => a.name === b.name && a.age === b.age
});

Disabling Cloning for Custom Classes

To avoid mutating the source object naively, by default values are cloned when set. However some objects cannot be naively cloned like custom classes.

import { Signal } from '@semantic-ui/reactivity';


class CustomClass {
  constructor(value) {
    this.value = value;
  }
}


const customInstance = new Signal(new CustomClass(42), {
  allowClone: false,
  equalityFunction: (a, b) => a.value === b.value
});


// The CustomClass instance won't be cloned when accessed
console.log(customInstance.get().value); // Output: 42

Get

Returns the current value of the reactive variable.

Syntax

someValue.get();

Alias

value can be used as an alias for get() if preferred

import { Signal } from '@semantic-ui/reactivity';


const counter = new Signal(0);
console.log(counter.value); // Output: 0
counter.value = 1;
console.log(counter.value); // Output: 1

Returns

any - The current value of the reactive variable.

Usage

Retrieving the Current Value

import { Signal } from '@semantic-ui/reactivity';
const counter = new Signal(0);
console.log(counter.get()); // Output: 0

Set

Sets a new value for the reactive variable.

Syntax

someValue.set(newValue);

Parameters

NameTypeDescription
newValueanyThe new value to set

Usage

Setting a New Value

import { Signal } from '@semantic-ui/reactivity';


const counter = new Signal(0);
counter.set(1);
console.log(counter.get()); // Output: 1

Subscribe

Creates a subscription that runs the callback whenever the value changes.

Parameters

NameTypeDescription
callbackFunctionFunction to be called when the value changes

Returns

Object - A subscription object with a stop() method to unsubscribe.

Usage

import { Signal } from '@semantic-ui/reactivity';


const counter = new Signal(0);
const subscription = counter.subscribe((newValue) => {
  console.log('Counter changed:', newValue);
});


counter.set(1); // Console: "Counter changed: 1"
subscription.stop(); // Stops the subscription

Peek

Returns the current value without triggering reactions.

Syntax

someValue.peek();

Returns

any - The current value of the reactive variable.

Usage

import { Signal } from '@semantic-ui/reactivity';


const counter = new Signal(0);
console.log(counter.peek()); // Output: 0

Clear

Sets the value of the reactive variable to undefined and trigger reactions.

Syntax

someValue.clear();

Usage

import { Signal } from '@semantic-ui/reactivity';


const counter = new Signal(0);
counter.clear();
console.log(counter.get()); // Output: undefined