iTwin / iTwinUI

A design system for building beautiful and well-working web interfaces.
https://itwin.github.io/iTwinUI/
MIT License
92 stars 35 forks source link

expose `show()`/`close()` methods via `Dialog.useInstance()` #1983

Open mayank99 opened 4 weeks ago

mayank99 commented 4 weeks ago

Changes

This adds two new API surfaces to Dialog:

  1. A useInstance hook containing show()/close() methods for imperative manipulation of dialog.
  2. An instance prop which accepts an instance returned from the above hook.

Together, this makes it easier to control the dialog without explicitly maintaining its state.

Supersedes #1976

Usage:

const dialog = Dialog.useInstance();

<Button onClick={dialog.show}>Open dialog</Button>
<Dialog instance={dialog}>
  <Button onClick={dialog.close}>Close dialog</Button>
</Dialog>

The implementation is quite simple: useInstance will create an instance of Instance, and useSynchronizeInstance will simply add methods to it. The instance stays referentially stable throughout its lifetime.

Testing

Added unit test and e2e test, updated stories, updated website examples.

Docs

Added docs + jsdocs + changeset.