signal()

The signal() method creates a reactive data object.

Overview

The signal() method accepts any value as an argument.

If no value is provided, it uses an empty object by default. If a primitive (like a string or number) is used, it returns an object with the value property.

let {signal} = reef;

// Create a signal object
let data = signal({
	greeting: 'Hello',
	name: 'World'
});

// returns {value: 42}
let num = signal(42);

A signal emits a reef:signal event on the document whenever one of its properties is modified.

The event.detail property contains the prop and value that were updated, and the action done to the data (either set or delete).

// Listen for data changes
document.addEventListener('reef:signal', function (event) {
	console.log('The data was updated!');
	let {prop, value, action} = event.detail;
});

// Update the data
data.greeting = 'Hi there';

Try signals on CodePen →

Namespaces

You can customize the event name by passing a second argument into the signal() method. It gets added to the end of the reef:signal event with a dash delimiter (-).

This provides useful way to differentiate updates to one signal from another.

let wizards = signal([], 'wizards');

// A "reef:signal-wizards" event gets emitted
wizards.push('Merlin');

Try signal namespaces on CodePen →