@@ -49,9 +49,9 @@ The theme is fully customizable, all colors can be changed. (And soon new themes
4949
5050Modify DifferOptions and InlineDiffOptions and see the output.
5151
52- Dual Minimap is defaultly shown, to hide middle minimap, just pass ShowSingleMinimap prop to Viewer.
52+ Dual Minimap is defaultly shown, to hide middle minimap, just pass ` ShowSingleMinimap ` prop to Viewer.
5353
54- To change Diff methods please see DifferOptions. By default virtual-react-json-diff uses following configuration.
54+ To change Diff methods please see ` DifferOptions ` . By default ` virtual-react-json-diff ` uses following configuration.
5555
5656```
5757new Differ({
@@ -67,7 +67,6 @@ new Differ({
6767Simply pass your json objects into Viewer Component. It will find differences and show.
6868
6969```
70- import React from "react";
7170import { VirtualDiffViewer } from "virtual-react-json-diff";
7271
7372const oldData = { name: "Alice", age: 25 };
@@ -85,6 +84,39 @@ export default function App() {
8584}
8685```
8786
87+ ---
88+ 89+ If you need to see or make some calculations on difference objects, you can get the diff data using ` getDifferData ` callback prop
90+ 91+ ```
92+ import { type DiffResult, VirtualDiffViewer } from "virtual-react-json-diff";
93+
94+ const [differData, setDifferData] = useState<[DiffResult[], DiffResult[]]>();
95+
96+ <VirtualDiffViewer {...props} getDiffData={diffData => setDifferData(diffData)} />
97+ ```
98+ 99+ Or if you have a custom Differ or a custom viewer, you can import ` Differ ` class to create diff objects using your own differ. Moreover you can pass that differ to ` VirtualizedDiffViewer ` .
100+ 101+ p.s. This is not recommended because you can modify all variables in Differ using ` differOptions ` prop in Viewer.
102+ 103+ ```
104+ import { Differ, VirtualDiffViewer } from "virtual-react-json-diff";
105+ ---
106+ const differOptions: DifferOptions = {
107+ showModifications: config.showModifications,
108+ arrayDiffMethod: config.arrayDiffMethod,
109+ };
110+ const differ = new Differ(differOptions);
111+
112+ ---
113+
114+ // Pass it into Viewer with 'customDiffer' prop
115+ <VirtualDiffViewer {...props} customDiffer={differ} />
116+ ```
117+ 118+ ---
119+ 88120The component exposes a root container with the class:
89121
90122```
@@ -95,21 +127,24 @@ You can pass your own class name via the className prop to apply custom themes.
95127
96128## Props
97129
98- | Prop | Type | Default | Description |
99- | ------------------- | ------------------------- | ------------------ | ---------------------------------------------------------------------- |
100- | ` oldValue ` | ` object ` | — | The original JSON object to compare (left side). |
101- | ` newValue ` | ` object ` | — | The updated JSON object to compare (right side). |
102- | ` height ` | ` number ` | — | Height of the diff viewer in pixels. |
103- | ` hideSearch ` | ` boolean ` | ` false ` | Hides the search bar if set to ` true ` . |
104- | ` searchTerm ` | ` string ` | ` "" ` | Initial search keyword to highlight within the diff. |
105- | ` leftTitle ` | ` string ` | — | Optional title to display above the left diff panel. |
106- | ` rightTitle ` | ` string ` | — | Optional title to display above the right diff panel. |
107- | ` onSearchMatch ` | ` (index: number) => void ` | — | Callback fired when a search match is found. Receives the match index. |
108- | ` differOptions ` | ` DifferOptions ` | ` Given Above ` | Advanced options passed to the diffing engine. |
109- | ` showSingleMinimap ` | ` boolean ` | ` false ` | If ` true ` , shows only one minimap instead of two. |
110- | ` className ` | ` string ` | — | Custom CSS class for styling the viewer container. |
111- | ` miniMapWidth ` | ` number ` | ` 40 ` | Width of each minimap in pixels. |
112- | ` inlineDiffOptions ` | ` InlineDiffOptions ` | ` {'mode': 'char'} ` | Options for fine-tuning inline diff rendering. |
130+ | Prop | Type | Default | Description |
131+ | ------------------- | -------------------------------------------------- | ------------------ | ---------------------------------------------------------------------- |
132+ | ` oldValue ` | ` object ` | — | The original JSON object to compare (left side). |
133+ | ` newValue ` | ` object ` | — | The updated JSON object to compare (right side). |
134+ | ` height ` | ` number ` | — | Height of the diff viewer in pixels. |
135+ | ` hideSearch ` | ` boolean ` | ` false ` | Hides the search bar if set to ` true ` . |
136+ | ` searchTerm ` | ` string ` | ` "" ` | Initial search keyword to highlight within the diff. |
137+ | ` leftTitle ` | ` string ` | — | Optional title to display above the left diff panel. |
138+ | ` rightTitle ` | ` string ` | — | Optional title to display above the right diff panel. |
139+ | ` onSearchMatch ` | ` (index: number) => void ` | — | Callback fired when a search match is found. Receives the match index. |
140+ | ` differOptions ` | ` DifferOptions ` | ` Given Above ` | Advanced options passed to the diffing engine. |
141+ | ` showSingleMinimap ` | ` boolean ` | ` false ` | If ` true ` , shows only one minimap instead of two. |
142+ | ` className ` | ` string ` | — | Custom CSS class for styling the viewer container. |
143+ | ` overScanCount ` | ` number ` | ` 28 ` | Number of rendered rows outside of the viewport for virtualization |
144+ | ` miniMapWidth ` | ` number ` | ` 40 ` | Width of each minimap in pixels. |
145+ | ` inlineDiffOptions ` | ` InlineDiffOptions ` | ` {'mode': 'char'} ` | Options for fine-tuning inline diff rendering. |
146+ | ` getDiffData ` | ` (diffData: [DiffResult[], DiffResult[]]) => void ` | - | Get difference data and make operations |
147+ | ` customDiffer ` | ` Differ ` | - | Pass custom differ - not recommended |
113148
114149## 🙌 Acknowledgements
115150
0 commit comments