## About
npm install @itwin/saved-views-reactA collection of utilities and React components for building iTwin applications that deal with Saved Views.
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: "{...}" },
}
} */
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..."
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);
* 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) => (
options={[
Custom menu item
,
]}
/>
)
}
);
}
`
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 (
groups={savedViews.groups}
tags={savedViews.tags}
actions={savedViews.actions}
/>
);
}
`
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 (
);
}
`
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 (
options={(close) => [
]}
/>
);
}
function OpenSavedView(props) {
const { savedView } = useSavedViewTileContext();
return (
);
}
``
---
Copyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.