Skip to main content

@lexical/react/useExtensionSignalValue

Type Aliases​

SignalValue​

SignalValue<S> = S extends ReadonlySignal<infer V> ? V : never

Defined in: packages/lexical-react/src/useExtensionSignalValue.ts:49

Type helper that extracts the value type from a ReadonlySignal. If the type is not a ReadonlySignal, it returns never.

Type Parameters​

S​

S

Example​

type MySignal = ReadonlySignal<number>;
type Value = SignalValue<MySignal>; // number

Functions​

useExtensionSignalValue()​

useExtensionSignalValue<Extension, K>(extension, prop): SignalValue<LexicalExtensionOutput<Extension>[K]>

Defined in: packages/lexical-react/src/useExtensionSignalValue.ts:74

A React hook that subscribes to a signal property from a Lexical extension's output and returns its current value. The component will re-render whenever the signal's value changes.

This hook combines the functionality of useExtensionDependency and useSignalValue, providing a convenient way to access reactive values from Lexical extensions.

Type Parameters​

Extension​

Extension extends AnyLexicalExtension

K​

K extends string | number | symbol

Parameters​

extension​

Extension

The Lexical extension instance

prop​

K

The property name in the extension's output that contains a signal

Returns​

SignalValue<LexicalExtensionOutput<Extension>[K]>

The current value of the signal property

Example​

import {useExtensionSignalValue} from '@lexical/react/useExtensionSignalValue';
import {MyExtension} from './MyExtension';

function MyComponent() {
  // Assuming MyExtension has a signal property 'count' in its output
  const count = useExtensionSignalValue(MyExtension, 'count');
  return <div>Count: {count}</div>;
}

useSignalValue()​

useSignalValue<V>(s): V

Defined in: packages/lexical-react/src/useExtensionSignalValue.ts:31

A React hook that subscribes to a signal and returns its current value. The component will re-render whenever the signal's value changes.

Type Parameters​

V​

V

Parameters​

s​

ReadonlySignal<V>

The ReadonlySignal to subscribe to

Returns​

V

The current value of the signal

Example​

const signal = new Signal(0);
function MyComponent() {
  const value = useSignalValue(signal);
  return <div>Value: {value}</div>;
}