---
title: Diff
order: 2
---

<!-- prettier-ignore -->
````jsx

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { ScriptDiffEditor } from '@riil-frontend/component-script-editor';
import { Button, Select } from '@alifd/next';

const originalValue = `{
  "a": 1,
  "b": 2
}
`;
const value = `{
  "a": 1.1,
  "c": 3
}
`;

const ds = ['vs', 'vs-dark', 'hc-black'].map((item) => ({ value: item, label: item }));

function App() {
	const [values, setValues] = useState({ value, originalValue });
	const [theme, setTheme] = useState(undefined);
	const switchValue = () => {
		setValues({
			value: values.originalValue,
			originalValue: values.value,
		});
	};
	return (
		<div style={{ height: '70vh', width: '70vw' }}>
			<div style={{ height: 40 }}>
				<Button onClick={switchValue}>交换内容</Button>
				<Select dataSource={ds} onChange={(value) => setTheme(value)} value={theme} placeholder="切换主题" />
			</div>
			<div style={{ height: 'calc(100% - 40px)' }}>
				<ScriptDiffEditor language={'json'} theme={theme} value={values.value} originalValue={values.originalValue} />
			</div>
		</div>
	);
}

ReactDOM.render(<App />, mountNode);

````
