
Enter a search term above to see results...
Enter a search term above to see results...
Signals are the core primitive for reactive state in Semantic UI. They hold a value and automatically track dependencies, notifying dependent computations—Reactions—when their value changes.
To create a signal import Signal
from the @semantic-ui/reactivity
package then initialize it with a value.
import { Signal } from '@semantic-ui/reactivity';
// Create signals for different data typesconst counter = new Signal(0);const userName = new Signal('Alice');const isActive = new Signal(true);const items = new Signal(['apple', 'banana']);const userProfile = new Signal({ id: 1, name: 'Bob' });
A Signal’s value can be accessed using .get()
or .value
.
console.log(counter.get()); // Output: 0console.log(userName.value); // Output: Alice
If this occurs within a reactive context (like a Reaction or a template expression) it will establish a reactive dependency and rerun the function whenever the value is updated.
reaction(() => { console.log(counter.get()); // outputs log whenever value changes});
Controlling Reactivity There are many ways to control the reactivity of signals in your app. For instance to access a Signal’s value without creating a dependency use the
.peek()
method. See Reactive Performance and Reactive Controls for more information.
Update a Signal’s value using the .set()
method or by directly assigning to the .value
property. This will notify any dependent Reactions to re-run.
// Using .set()counter.set(1);console.log(counter.get()); // Output: 1
// Using .value assignmentuserName.value = 'Charlie';console.log(userName.value); // Output: Charlie
Semantic UI also provides convenient mutation helpers directly on Signal instances for common update patterns, especially for arrays and objects.
// Using a mutation helpercounter.increment(); // Equivalent to counter.set(counter.peek() + 1)console.log(counter.get()); // Output: 2
Signals can be transformed and combined to create new reactive values:
const items = new Signal(['apple', 'banana', 'cherry']);
// Transform a single signal with derive()const itemCount = items.derive(arr => arr.length);
// Combine multiple signals with computed()const shoppingList = Signal.computed(() => `You have ${itemCount.get()} items: ${items.get().join(', ')}`);
console.log(shoppingList.get()); // "You have 3 items: apple, banana, cherry"
Learn More For complete information about derived and computed signals, see the Dependent Signals guide.
Advanced Usage For more configuration options, such as customizing equality checks or value cloning behavior, see the Signal Options & Configuration guide.