React rendering tool for JYCM (Json diff).
npm install react-jycm-viewerbash
yarn add react-jycm-viewer react-monacor-editor monaco-editor
yarn add -D monaco-editor-webpack-plugin
`
webpack config
`js
{
plugins: [
// ...
new MonacoWebpackPlugin({
languages: ["json"],
})
]
}
`
Use in your component
`TSX
import React, { FC, useState } from 'react';
import ReactDOM from 'react-dom';
import {
JYCMRender,
JYCMContext,
IUseJYCMProps,
IJYCMRenderProps,
useJYCM,
} from "react-jycm-viewer";
const SimpleForm: FC<{
label: string,
}> = ({ label, children }) => {
return height: "100%",
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
position: "relative",
padding: "0 15px"
}}
>
{label}:
{children}
API
JYCMContext
JYCMContext Shared state across the context.
It gives you
You can as follow
`tsx
import React, { FC, useState } from 'react';
import ReactDOM from 'react-dom';
import {
JYCMRender,
JYCMContext,
IUseJYCMProps,
IJYCMRenderProps,
useJYCM,
} from "react-jycm-viewer";
const CustomApp: React.FC = () => {
const { pairInfo, activeLeftJsonPath, activeRightJsonPath } =
useJYCMContext();
return (
content={activeLeftJsonPath.join("->")}
/>
content={activeRightJsonPath.join("->")}
/>
);
};
const App: React.FC = ({ leftJsonStr, rightJsonStr, diffResult, ...args }) => {
const jycmContextValue = useJYCM({
leftJsonStr,
rightJsonStr,
diffResult,
});
return (
);
};
ReactDOM.render(
document.getElementById('root') as HTMLElement
)
``