@itwin/saved-views-react

About

A collection of utilities and React components for building iTwin applications that deal with Saved Views.

Documentation

$3

Capture current viewport state into serializable format. You can use this data later to restore the view.

``ts
const { viewData, extensions } = await captureSavedViewData({ viewport });
console.log({ viewData, extensions }); /*
{
viewData: { itwin3dView: {...} },
extensions: {
{ extensionName: "EmphasizeElements", data: "{...}" },
}
} */
`

$3

Generate Saved View thumbnail based on what is currently displayed on the viewport.

`ts
const thumbnail = captureSavedViewThumbnail(viewport);
console.log(thumbnail); // "data:image/png;base64,iVBORw0KGoAAAANSUhEUg..."
`

$3

Update viewport state to match captured Saved View.

`ts
// Capture viewport state
const savedViewData = await captureSavedViewData({ viewport });
// Restore viewport state
await applySavedView(iModel, viewport, savedViewData);
`

$3

* SavedViewTile
* SavedViewOptions
* LayeredDropdownMenu
* TileGrid
* StickyExpandableBlock

You can use these components however you see fit, however, below is the suggested component arrangement.

`tsx
import { LayeredMenuItem, SavedViewTile, StickyExpandableBlock, TileGrid } from "@itwin/saved-views-react";

export function SavedViewsWidget(props) {
return (


{
(savedView) => (
savedView={savedView}
options={[
,
}>
Custom menu item
,
]}
/>
)
}


);
}
`

$3

useSavedViews React hook provides basic functionality to jump-start your Saved Views widget. It accepts ITwinSavedViewsClient which is used to pull Saved View data and synchronize it back to the Saved Views service.

`tsx
import { useSavedViews, ITwinSavedViewsClient } from "@itwin/saved-views-react";

const client = new ITwinSavedViewsClient({
getAccessToken: async () => "itwin_platform_auth_token",
});

export function SavedViewsWidget(props) {
const savedViews = useSavedViews({ iTwinId: props.iTwinId, iModelId: props.iModelId, client });
if (savedViews === undefined) {
return "loading";
}

return (
savedViews={savedViews.savedViews}
groups={savedViews.groups}
tags={savedViews.tags}
actions={savedViews.actions}
/>
);
}
`

$3

In order to localize text across various provided components, mount and supply localization object containing string replacements.

`tsx
import { SavedViewsContextProvider, type LocalizationStrings } from "@itwin/saved-views-react";

const localization: LocalizationStrings = { delete: "🗑️" };

export function SavedViewsWidget() {
return (



);
}

`

$3

accepts an array of options to display in its context menu. This package exposes a number of ready-to-use options to use with your tiles, accessible through SavedViewOptions export, and you are free to create your own ones.

`tsx
import { MenuDivider, MenuItem } from "@itwin/itwinui-react";
import { SavedViewOptions, SavedViewTile, useSavedViewTileContext } from "@itwin/saved-views-react";

export function SavedViewsWidget(props) {
return (
savedView={props.savedView}
options={(close) => [
,
,
,
]}
/>
);
}

function OpenSavedView(props) {
const { savedView } = useSavedViewTileContext();

return (
props.onClick(savedView)}>
Open {savedView.displayName}

);
}
``

Contributing

Contributing.

---

Copyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.