Form

Diff Viewer

A diff viewer allows users to compare code files by showing them side by side and highlighting differences between them.
View source
@@ -3,7 +3,7 @@
33 "parents" : { },
44 "model" : {
55 "condition" : { },
6 "description" : "Some user note",
6 "description" : "Some differences",
77 "isDefault" : true,
88 "name" : "default",
99 "splitTestEnabled" : false
1
import {DiffViewer} from '@coveord/plasma-react';
2


3
const Demo = () => {
4
    const diffText = `
5
--- PRIMARY
6
+++ CURRENT_STATE
7
@@ -3,7 +3,7 @@
8
   "parents" : { },
9
   "model" : {
10
     "condition" : { },
11
-    "description" : "Some user note",
12
+    "description" : "Some differences",
13
     "isDefault" : true,
14
     "name" : "default",
15
     "splitTestEnabled" : false
16
`;
17


18
    return <DiffViewer difference={diffText} />;
19
};
20
export default Demo;

Props

NameTypeDefaultDescription
differencerequiredstring
Show changes between state A and state B (git diff format)
noChangesDescriptionstring
Description to show when the old and new values are the same
noChangesLabelstring
Title to show when the old and new values are the same
splitViewbooleanfalse
Whether the difference display is split

Examples

Split view
@@ -3,7 +3,7 @@
3 "parents" : { },3 "parents" : { },
4 "model" : {4 "model" : {
5 "condition" : { },5 "condition" : { },
6 "description" : "Some user note",6 "description" : "Some differences",
7 "isDefault" : true,7 "isDefault" : true,
8 "name" : "default",8 "name" : "default",
9 "splitTestEnabled" : false9 "splitTestEnabled" : false
1
import {DiffViewer} from '@coveord/plasma-react';
2


3
const Demo = () => {
4
    const diffText = `
5
--- PRIMARY
6
+++ CURRENT_STATE
7
@@ -3,7 +3,7 @@
8
   "parents" : { },
9
   "model" : {
10
     "condition" : { },
11
-    "description" : "Some user note",
12
+    "description" : "Some differences",
13
     "isDefault" : true,
14
     "name" : "default",
15
     "splitTestEnabled" : false
16
`;
17


18
    return <DiffViewer difference={diffText} splitView />;
19
};
20
export default Demo;
Many changes
@@ -3,7 +3,7 @@
33 "parents" : { },
44 "model" : {
55 "condition" : { },
6 "description" : "Some user note",
6 "description" : "Some differences",
77 "isDefault" : true,
88 "name" : "default",
99 "splitTestEnabled" : false
@@ -15,22 +15,22 @@
1515 "parents" : { },
1616 "model" : {
1717 "condition" : { },
18 "description" : "Some user note",
18 "description" : "Some differences",
1919 "isDefault" : true,
2020 "name" : "default",
2121 "splitTestEnabled" : false
1
import {DiffViewer} from '@coveord/plasma-react';
2


3
const Demo = () => {
4
    const diffText = `
5
--- PRIMARY
6
+++ CURRENT_STATE
7
@@ -3,7 +3,7 @@
8
   "parents" : { },
9
   "model" : {
10
     "condition" : { },
11
-    "description" : "Some user note",
12
+    "description" : "Some differences",
13
     "isDefault" : true,
14
     "name" : "default",
15
     "splitTestEnabled" : false
16
@@ -15,22 +15,22 @@
17
   "parents" : { },
18
   "model" : {
19
     "condition" : { },
20
-    "description" : "Some user note",
21
+    "description" : "Some differences",
22
     "isDefault" : true,
23
     "name" : "default",
24
     "splitTestEnabled" : false
25
`;
26


27
    return <DiffViewer difference={diffText} />;
28
};
29
export default Demo;
Equal values

No changes

There are no changes to display since oldValue and newValues are equal

1
import {DiffViewer} from '@coveord/plasma-react';
2


3
const Demo = () => {
4
    const diffText = ``;
5


6
    return (
7
        <DiffViewer
8
            difference={diffText}
9
            noChangesLabel={'No changes'}
10
            noChangesDescription={'There are no changes to display since oldValue and newValues are equal'}
11
        />
12
    );
13
};
14
export default Demo;

No guidelines exist for DiffViewer yet.

Create guidelines