Skip to main content

@dialstack/sdk / react / useUpdateWithSetter

Function: useUpdateWithSetter()

function useUpdateWithSetter<T, V>(
   component, 
   value, 
   onUpdated): void;

Defined in: sdk/src/react/useUpdateWithSetter.ts:38

Hook that synchronizes a React prop value to a Web Component setter method

This enables declarative React patterns (props) to control imperative Web Component APIs (setter methods) in a type-safe way.

Type Parameters​

T​

T extends HTMLElement

V​

V

Parameters​

component​

T | null

The Web Component instance (or null if not mounted)

value​

V | undefined

The prop value to sync

onUpdated​

(component, value) => void

Callback that receives the component and value, should call the setter

Returns​

void

Example​

const Voicemails = ({ userId, onVoicemailSelect }) => {
  const { containerRef, componentInstance } = useCreateComponent(dialstack, 'voicemails');

  // Type-safe: TypeScript knows componentInstance has setUserId method
  useUpdateWithSetter(componentInstance, userId, (comp, val) => {
    comp.setUserId(val);
  });

  useUpdateWithSetter(componentInstance, onVoicemailSelect, (comp, val) => {
    comp.setOnVoicemailSelect(val);
  });

  return <div ref={containerRef} />;
};