Quick Start
A surface is opened with present() and closed from the rendered component with pop().
1. Create a dialog component
import { Surface } from 'imperative-surface';
function ConfirmDialog({ pop }: SurfaceContext<boolean>) {
return (
<Surface.Body>
<Surface.Header
title="Delete item?"
centerTitle
onPop={() => pop(false)}
/>
<Surface.Content>
<p>This action cannot be undone.</p>
</Surface.Content>
<Surface.Footer>
<button onClick={() => pop(false)}>Cancel</button>
<button onClick={() => pop(true)}>Delete</button>
</Surface.Footer>
</Surface.Body>
);
}2. Present it
const confirmed = await Surface.Dialog.present<boolean>({
body: ConfirmDialog,
});
if (confirmed) {
// Delete the item.
}present() returns a Promise. The Promise resolves when the surface's pop() function is called.
Passing data into the surface
Use props to pass application data to the body component:
function UserDialog({ pop, props }: SurfaceContext) {
return (
<Surface.Body>
<Surface.Header title={props.user.name} onPop={() => pop()} />
<Surface.Content>
<p>{props.user.email}</p>
</Surface.Content>
</Surface.Body>
);
}
await Surface.Dialog.present({
body: UserDialog,
props: {
user,
},
});Returning a value
The value passed to pop() becomes the resolved Promise value:
const result = await Surface.Dialog.present<string>({
body: ({ pop }) => (
<button onClick={() => pop('selected')}>Select</button>
),
});