Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
constructor
depend
changed
cleanUp
unsubscribe
Dependency
Dependency is a core class in Semantic UI’s reactivity system that manages dependencies between reactive computations and data sources.
Advanced Use Only Dependency should not be used by most developers directly to control dependencies, but is instead used internally by
SignalandReactionto establish reactivity. Only some particular advanced use cases or metaframeworks will need to access this class directly.
constructor
Creates a new Dependency instance.
Syntax
new Dependency()Usage
import { Dependency } from '@semantic-ui/reactivity';
const dep = new Dependency();depend
Registers the current reaction as dependent on this Dependency.
Syntax
dependency.depend()Usage
import { Dependency, Reaction } from '@semantic-ui/reactivity';
const dep = new Dependency();
Reaction.create(() => { dep.depend(); console.log('This will re-run when dep.changed() is called');});changed
Notifies all dependent reactions that this dependency has changed, causing them to re-run.
Syntax
dependency.changed(context)Parameters
| Name | Type | Description |
|---|---|---|
| context | any | (Optional) Additional context information to pass to invalidated reactions |
Usage
import { Dependency, Reaction } from '@semantic-ui/reactivity';
const dep = new Dependency();
Reaction.create(() => { dep.depend(); console.log('Reaction ran');});
dep.changed(); // Triggers the reaction to re-runcleanUp
Removes a specific reaction from this dependency’s list of dependents.
Syntax
dependency.cleanUp(reaction)Parameters
| Name | Type | Description |
|---|---|---|
| reaction | Reaction | The reaction to remove from the dependency list |
Usage
import { Dependency, Reaction } from '@semantic-ui/reactivity';
const dep = new Dependency();
const reaction = Reaction.create(() => { dep.depend(); console.log('Reaction ran');});
// Later, when you want to remove this specific reaction:dep.cleanUp(reaction);unsubscribe
Alias for cleanUp. Removes a specific reaction from this dependency’s list of dependents.
Syntax
dependency.unsubscribe(reaction)Parameters
| Name | Type | Description |
|---|---|---|
| reaction | Reaction | The reaction to unsubscribe from the dependency |
Usage
import { Dependency, Reaction } from '@semantic-ui/reactivity';
const dep = new Dependency();
const reaction = Reaction.create(() => { dep.depend(); console.log('Reaction ran');});
// Later, when you want to unsubscribe this specific reaction:dep.unsubscribe(reaction);