Readme Update (Updates Contributing, Usage) Sections

.changeset/tough-zebras-feel.md

@@ -0,0 +1,2 @@
+---
+---

README.md

@@ -23,7 +23,23 @@ pnpm install
 
 ## Contributing
 
-We welcome contributions to make this project better. You can submit feature requests or report bugs by creating an [issue](https://github.com/iTwin/changed-elements-react/issues).
+### Issues
+
+We welcome contributions to make this package better. You can submit feature requests or report bugs by creating an [issue](https://github.com/iTwin/changed-elements-react/issues).
+
+### Versioning with Changesets
+
+This repository uses [Changesets](https://github.com/changesets/changesets) to manage package versioning and changelogs. When making changes that affect the public API or behavior, please add a changeset by running:
+
+```shell
+npx changeset
+```
+
+Follow the prompts to describe your changes and select the appropriate version bump (major, minor, or patch). Versioning should follow [semver](https://semver.org/) conventions. If no version bump is required (such as for documentation-only changes), use `npx changeset --empty`.
+
+When changesets are added and merged into the main branch, a release pull request (PR) will be automatically created by the Changesets GitHub Action. This PR will contain the version updates and changelog entries generated from your changesets. Review the release PR to ensure the version bumps and changelog messages are accurate before merging. Once the release PR is merged, the new package version will be published automatically.
+
+For more details, see the [Changesets documentation](https://github.com/changesets/changesets/blob/main/README.md).
 
 ---
 

packages/changed-elements-react/README.md

@@ -18,6 +18,8 @@ To begin using this package in your application, you will need to:
 2. Provide `<VersionCompareContext />` somewhere in your app.
 
     ```tsx
+      import { VersionCompareContext } from "@itwin/changed-elements-react";
+
       <VersionCompareContext iModelsClient={iTwinIModelsClient}>
         <App />
       </VersionCompareContext>
@@ -33,14 +35,69 @@ To begin using this package in your application, you will need to:
     });
     ```
 
-4. Mount `<VersionCompareSelectComponent />` to begin version comparison worflow by selecting iModel versions to compare. You should also add a button in your UI that calls `VersionCompare.manager.stopComparison()`.
-5. `<ChangedElementsWidget />` React component lets users inspect differences in properties between versions, generate reports, search for changed elements, and control element visibility.
+4. `<ChangedElementsWidget />` React component lets users inspect differences in properties between versions, generate reports, search for changed elements, and control element visibility. The following code has example of widget use but does not show off all props for widget.
+
+    ```ts
+    import { ChangedElementsWidget } from "@itwin/changed-elements-react";
+    <ChangedElementsWidget
+          useV2Widget
+          feedbackUrl="https://example.com"
+          iModelConnection={UiFramework.getIModelConnection()!}
+          enableComparisonJobUpdateToasts
+          manageNamedVersionsSlot={<ManageNamedVersions />}
+          documentationHref="https://example.com"
+        />,
+    ```
+
+5. `<NamedVersionSelectorWidget />` **Experimental** React component lets users inspect differences in properties between versions, generate reports, search for changed elements, and control element visibility. The following code has example of widget use but does not show off all props for widget.
+
+    ```ts
+    import { NamedVersionSelectorWidget } from "@itwin/changed-elements-react";
+    <NamedVersionSelectorWidget
+      iModel={iModel}
+      manager={VersionCompare.manager}
+      manageVersions={<ManageNamedVersions />}
+      feedbackUrl="https://example.com"
+      documentationHref="https://example.com"
+      />
+    ```
+
 6. `<PropertyComparisonTable />` React component lists properties of a selected element and displays how they changed between two versions.
 
+    ```ts
+    import { PropertyComparisonTable } from "@itwin/changed-elements-react";
+
+    <PropertyComparisonTable
+      manager={versionCompareManager}
+      selection={selection}
+      isSideBySide={false}
+      displaySideBySideToggle={true}
+      onSideBySideToggle={() => {
+        // handle toggle logic here
+      }}
+    />
+    ```
+
 ## Contributing
 
+### Issues
+
 We welcome contributions to make this package better. You can submit feature requests or report bugs by creating an [issue](https://github.com/iTwin/changed-elements-react/issues).
 
+### Versioning with Changesets
+
+This repository uses [Changesets](https://github.com/changesets/changesets) to manage package versioning and changelogs. When making changes that affect the public API or behavior, please add a changeset by running:
+
+```shell
+npx changeset
+```
+
+Follow the prompts to describe your changes and select the appropriate version bump (major, minor, or patch). Versioning should follow [semver](https://semver.org/) conventions. If no version bump is required (such as for documentation-only changes), use `npx changeset --empty`.
+
+When changesets are added and merged into the main branch, a release pull request (PR) will be automatically created by the Changesets GitHub Action. This PR will contain the version updates and changelog entries generated from your changesets. Review the release PR to ensure the version bumps and changelog messages are accurate before merging. Once the release PR is merged, the new package version will be published automatically.
+
+For more details, see the [Changesets documentation](https://github.com/changesets/changesets/blob/main/README.md).
+
 ---
 
 Copyright © Bentley Systems, Incorporated. All rights reserved. See [LICENSE.md](./LICENSE.md) for license terms and full copyright notice.