introducing imodel-react-hooks article useFeatureOverrides sample

useFeatureOverrides-sample.tsx

import { ViewportComponent } from "@bentley/ui-components";
import { myIModel, myViewDefId, iModelInnerModels, useFetchAppMarkers, ElemMarkerData } from "./my-app-state";
import { FeatureOverrideReactProvider, useFeatureOverrides, useMarker, IModelJsViewProvider  } from "@bentley/imodel-react-hooks";
import { FeatureAppearance } from "@bentley/imodeljs-common";
import { Id64Array } from "@bentley/bentleyjs-core";

function RedElementMarker(props: ElemMarkerData) {
  const RED = {r: 255, g: 0, b: 0};
  useMarker({ worldLocation: props.worldLocation, image: props.someSvgPath });
  useFeatureOverrides({ // override the one element to be red
    overrider: (overrides) => overrides.overrideElement(elemId, FeatureAppearance.fromJSON({rgb: RED}));
  });
  return null;
}

function GreenifyGroup(props: {elemGroupIds: Id64Array}) {
  const GREEN = {r: 0, g: 255, b: 0};
  useFeatureOverrides({
    overrider: (overrides) => {
      for (const id of props.elemGroupIds) { // override group to be green
        overrides.overrideElement(id, FeatureAppearance.fromJSON({rgb: GREEN}));
      }
    }
  });
  return null;
}

function MyAppPage() {
  const { elemGroupIds, elemMarker } = useFetchAppData();
  return (
    <div className="my-app-page">
      <ViewportComponent imodel={myIModel} viewDefinitionId={myViewDefId} ruleset={"Default"} />
      <GreenifyGroup elemGroupIds={elemGroupIds} />
      {elemMarkers.map(e => <RedElementMarker data={e} />)};
    </div>
  );
}