Reactivity with Signals

@semantic-ui/reactivity is a standalone implementation of a signals based reactivity system. It is used internally to power templating and rendering components, but can also be used as reactivity primitives for any custom project.

Installation

Reactivity can be used as a standalone package or alongside Semantic UI components.

npm install @semantic-ui/reactivity

Basic Usage

import { signal, reaction } from '@semantic-ui/reactivity';

const counter = signal(0);

reaction(() => {
  console.log('Counter value:', counter.get());
});

counter.set(1); // Console: "Counter value: 1"

API Sections

• Signal - Create reactive values
• Reaction - Run computations that re-fire on change
• Derived Signals - Compute signals from other signals
• Reactive Controls - Suspend tracking, gate propagation
• Flushing - Control when reactions run
• Debugging - Trace and inspect reactivity
• Scheduler - The batching engine
• Dependency - Low-level dependency tracking

Reactive Helpers

Semantic UI includes various helpers to make it easy to manipulate data like arrays, records (arrays of objects), counters, toggles, and streamline data manipulation.

• Number Helpers

  • increment(amount)
  • decrement(amount)

• Boolean Helpers

  • toggle() for toggling between false and true

• Array Helpers

  • push()
  • unshift()
  • splice()
  • setIndex(index, value)
  • removeIndex(index)

• Collection Helpers (Array of Objects)

  • setItemProperty(id, property, value)
  • setIndexProperty(index, property, value)
  • setProperty(property, value)
  • toggleItemProperty(id, property)
  • toggleProperty(property)
  • replaceItem(item, id)
  • removeItem(id)
  • getItemIndex(id)
  • getId(item)
  • hasId(item)

• Date Helpers

  • now() for setting to current time

These helpers provide convenient ways to manipulate reactive data structures and streamline common operations in your reactive computations.