Collection Helpers API reference for Collection Helpers in Semantic UI's reactivity system database Guide

Collection Helpers

Collection Helpers provide methods for manipulating arrays of objects with unique identifiers. These helpers make it easy to update, replace, or remove specific items in a collection while maintaining reactivity.

An object’s ID is determined by checking for properties in this order: _id, id, hash, key. The first defined value is used as the identifier.

setProperty

Sets a property on an object in the collection that matches the given id.

Syntax

signal.setProperty(id, property, value)

Parameters

NameTypeDescription
idanyThe id of the object to modify
propertystringThe name of the property to set
valueanyThe value to set for the property

Usage

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


const users = new Signal([
  { id: 'user1', name: 'Alice' },
  { id: 'user2', name: 'Bob' }
]);


users.setProperty('user1', 'status', 'active');

Example

replaceItem

Replaces an entire object in the collection that matches the given id.

Syntax

signal.replaceItem(id, newItem)

Parameters

NameTypeDescription
idanyThe id of the object to replace
newItemObjectThe new object to replace the old one

Usage

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


const users = new Signal([
  { id: 'user1', name: 'Alice' },
  { id: 'user2', name: 'Bob' }
]);


users.replaceItem('user1', { id: 'user1', name: 'Alex' });

Example

removeItem

Removes an object from the collection that matches the given id.

Syntax

signal.removeItem(id)

Parameters

NameTypeDescription
idanyThe id of the object to remove

Usage

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


const users = new Signal([
  { id: 'user1', name: 'Alice' },
  { id: 'user2', name: 'Bob' }
]);


users.removeItem('user1');

Example

getIDs

Gets all possible ID values from an object by checking for _id, id, hash, key properties.

Syntax

signal.getIDs(item)

Parameters

NameTypeDescription
itemObject or stringThe object to get IDs from, or a string ID directly

Returns

TypeDescription
ArrayArray of ID values found in the object

Usage

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


const users = new Signal([
  { _id: '1', id: 'user1', name: 'Alice' }
]);


// Using with an object
const allIds = users.getIDs(users.value[0]); // ['1', 'user1']


// Using with a string
const stringId = users.getIDs('user1'); // ['user1']

getID

Gets the first available ID from an object by checking for properties in this order: _id, id, hash, key.

Syntax

signal.getID(item)

Parameters

NameTypeDescription
itemObject or stringThe object to get ID from, or a string ID directly

Returns

TypeDescription
stringThe first available ID found, or the string passed if a string was provided

Usage

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


const users = new Signal([
  { _id: '1', id: 'user1', name: 'Alice' }
]);


// Using with an object
const id = users.getID(users.value[0]); // '1'


// Using with a string
const stringId = users.getID('user1'); // 'user1'

hasID

Checks if an object or string has a specific ID.

Syntax

signal.hasID(item, id)

Parameters

NameTypeDescription
itemObject or stringThe object or string to check
idstringID to look for

Returns

TypeDescription
booleantrue if the object or string’s ID matches the provided id, false otherwise

Usage

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


const users = new Signal([
  { _id: '1', id: 'user1', name: 'Alice' }
]);


// Check if an object has a specific ID
users.hasID(users.value[0], '1'); // true
users.hasID(users.value[0], 'user1'); // true
users.hasID(users.value[0], 'wrongId'); // false


// Check if a string has a specific ID
users.hasID('user1', 'user1'); // true
users.hasID('user1', 'user2'); // false

getItem

Gets the index of an object with the specified ID within the Signal’s array value.

Syntax

signal.getItem(id)

Parameters

NameTypeDescription
idstringID to look for

Returns

TypeDescription
numberIndex of the matching object in the array, or -1 if not found

Usage

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


const users = new Signal([
  { id: 'user1', name: 'Alice' },
  { id: 'user2', name: 'Bob' }
]);


const indexOfBob = users.getItem('user2'); // 1
const indexOfUnknown = users.getItem('user3'); // -1