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 = new Signal(0);

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

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

API Sections

• Signal - Core class for creating signals
• Reaction - Managing reactive computations
• Dependency - Low-level dependency tracking
• Flushing - Controlling the execution of reactions

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)
  • setArrayProperty(indexOrProp, property, value)

• Collection Helpers (Array of Objects)

  • setProperty(id, property, value)
  • replaceItem(item, id)
  • removeItem(id)
  • getIndex(id)
  • getID(index)
  • hasID(index)

• 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.