How to open version history in pop up in SPFx react project ?

VISKR05 

In SharePoint Framework (SPFx) with React, you can use the `SPFxDialog` component from the `@pnp/spfx-controls-react` library to open the version history page as a popup. Here's how you can achieve this:

1. Install the necessary packages: Run the following command in your SPFx project directory to install the required packages:

npm install @pnp/spfx-controls-react

2. Import the required modules: In your React component file, import the necessary modules as follows:

import { SPFxDialog } from '@pnp/spfx-controls-react/lib/SPFxDialog';
import { WebPartContext } from '@microsoft/sp-webpart-base';

3. Define the dialog state: Add a dialog state property to your component's state to control the visibility of the dialog:

export interface IYourComponentState {
isDialogOpen: boolean;
}

4. Open the dialog on anchor click: In your component's render method, set up an anchor tag with an onClick event handler to open the dialog:

public render(): React.ReactElement<IYourComponentProps> {
return (
<div>
<a href="#" onClick={this.openDialog}>Open Version History</a>
<SPFxDialog
context={this.props.context}
isOpen={this.state.isDialogOpen}
title="Version History"
width={800}
height={600}
onDismiss={this.closeDialog}
>
<iframe
src={this.getVersionHistoryUrl()}
width="100%"
height="100%"
frameBorder={0}
/>
</SPFxDialog>
</div>
);
}

5. Implement the dialog methods: Add the necessary methods to open and close the dialog:

private openDialog = (): void => {
this.setState({ isDialogOpen: true });
};

private closeDialog = (): void => {
this.setState({ isDialogOpen: false });
};

private getVersionHistoryUrl = (): string => {
const { listGUID, itemID } = this.props; // Get the list GUID and item ID

return `${this.props.context.pageContext.web.absoluteUrl}/_layouts/15/Versions.aspx?list=${listGUID}&ID=${itemID}`;
};

Make sure to replace `listGUID` and `itemID` in the `getVersionHistoryUrl` method with the actual list GUID and item ID you want to display the version history for.

With this implementation, when the user clicks the "Open Version History" link, the dialog will open, displaying the version history page in an iframe within the dialog.

Remember to adjust the code according to your component's structure and requirements.