Imperative Surface Imperative Surface

SurfaceContext

SurfaceContext describes the arguments passed to a component rendered inside a Dialog or Sheet.

export interface SurfaceContext<T = any> {
  pop: (value?: T | null) => void;
  props?: any;
}

pop

Closes the current surface and resolves the present() Promise.

function Dialog({ pop }: SurfaceContext<boolean>) {
  return (
    <button onClick={() => pop(true)}>
      Confirm
    </button>
  );
}

props

Contains the optional value supplied through present({ props }).

function UserDialog({ props }: SurfaceContext) {
  return <p>{props.user.name}</p>;
}

For application-level type safety around props, define your own component prop type and validate or narrow the data at the boundary.

On this page