{"id":48576168,"url":"https://github.com/eggachecat/react-jycm-viewer","last_synced_at":"2026-04-08T15:43:42.509Z","repository":{"id":39908856,"uuid":"413707849","full_name":"eggachecat/react-jycm-viewer","owner":"eggachecat","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-24T04:13:02.000Z","size":46,"stargazers_count":16,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-08T15:43:39.554Z","etag":null,"topics":["diff-viewer","json","json-diff-viewer","jsondiff","jsondiffviewer","react"],"latest_commit_sha":null,"homepage":"https://eggachecat.github.io/jycm-viewer","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eggachecat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-10-05T06:58:48.000Z","updated_at":"2024-06-08T12:03:03.000Z","dependencies_parsed_at":"2024-01-24T05:25:44.648Z","dependency_job_id":"65e08a02-3841-474f-a76b-c594cc0983f5","html_url":"https://github.com/eggachecat/react-jycm-viewer","commit_stats":{"total_commits":10,"total_committers":3,"mean_commits":"3.3333333333333335","dds":0.5,"last_synced_commit":"0e465db3afe82715d54a8e367edf6b1540af94ef"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eggachecat/react-jycm-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggachecat%2Freact-jycm-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggachecat%2Freact-jycm-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggachecat%2Freact-jycm-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggachecat%2Freact-jycm-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eggachecat","download_url":"https://codeload.github.com/eggachecat/react-jycm-viewer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggachecat%2Freact-jycm-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31562696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diff-viewer","json","json-diff-viewer","jsondiff","jsondiffviewer","react"],"created_at":"2026-04-08T15:43:41.757Z","updated_at":"2026-04-08T15:43:42.499Z","avatar_url":"https://github.com/eggachecat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Json Diff Viewer\n\nThis is the renderer for [JYCM](https://github.com/eggachecat/jycm).\n\nIt is very easy to use thanks to the [React Context] (https://reactjs.org/docs/context.html)\n\n**LIVE DEMO**: https://github.com/eggachecat/jycm-viewer\n\n# GIF-Show\n\n![gif-show](https://media.giphy.com/media/03PbgaFqYCwyhzOUSU/giphy.gif)\n\n# Good-to-go Example project\n\nHere's a working demo project [react-jycm-viewer-example](https://github.com/eggachecat/react-jycm-viewer-example)\n\nOr here: [https://eggachecat.github.io/jycm-json-diff-viewer/](https://eggachecat.github.io/jycm-json-diff-viewer/)\n\n# Usage\n\n## dependencices\n```bash\nyarn add react-jycm-viewer react-monaco-editor monaco-editor\nyarn add -D monaco-editor-webpack-plugin\n```\n\n## webpack config\n```js\n{\n    plugins: [\n        // ...\n        new MonacoWebpackPlugin({\n            languages: [\"json\"],\n        })\n    ]\n}\n\n```\n\n\n\n# Use in your component\n```TSX\nimport React, { FC, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport {\n  JYCMRender,\n  JYCMContext,\n  IUseJYCMProps,\n  IJYCMRenderProps,\n  useJYCM,\n} from \"react-jycm-viewer\";\n\nconst SimpleForm: FC\u003c{\n    label: string,\n}\u003e = ({ label, children }) =\u003e {\n    return \u003cdiv style={{\n        height: \"100%\",\n        width: \"100%\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"space-between\",\n        alignItems: \"center\",\n        position: \"relative\",\n        padding: \"0 15px\"\n    }}\n    \u003e\n        \u003cdiv style={{ display: \"inline-block\" }}\u003e{label}:\u003c/div\u003e\n        \u003cdiv style={{ width: \"100%\" }}\u003e{children}\u003c/div\u003e\n    \u003c/div\u003e\n}\n\nconst safeJSONCallback = (value: string, cb: (v: string) =\u003e void) =\u003e {\n    try {\n        JSON.parse(value);\n        return cb(value)\n    } catch (e) {\n        return false;\n    }\n}\n\nconst App = () =\u003e {\n\n    const [leftJSONStr, setLeftJSONStr] = useState(JSON.stringify(leftJson))\n    const [rightJSONStr, setRightJSONStr] = useState(JSON.stringify(rightJson))\n    const [jycmResultStr, setJYCMResultStr] = useState(JSON.stringify(diffResult))\n\n    // use this can ave your time! see provider below\n    const jycmContextValue = useJYCM({\n        leftJsonStr,\n        rightJsonStr,\n        diffResult,\n    });\n\n    // In your component you can use all properties from jycm\n    // using code \n    // const jycmContext = useContext(JYCMContext)!;\n\n\n    return \u003cdiv style={{ height: \"100%\", width: \"100%\" }}\u003e\n        \u003ch1\u003eDemo For JYCM render\u003c/h1\u003e\n        \u003cdiv style={{ height: \"100%\", width: \"100%\", display: \"flex\" }}\u003e\n            \u003cSimpleForm label=\"left JSON\"\u003e\n                \u003ctextarea\n                    style={{ width: \"100%\", wordBreak: \"break-all\" }}\n                    rows={5}\n                    defaultValue={leftJSONStr}\n                    onChange={e =\u003e { safeJSONCallback(e.target.value, setLeftJSONStr) }} /\u003e\n            \u003c/SimpleForm\u003e\n            \u003cSimpleForm label=\"right JSON\"\u003e\n                \u003ctextarea\n                    style={{ width: \"100%\", wordBreak: \"break-all\" }}\n                    rows={5}\n                    defaultValue={rightJSONStr}\n                    onChange={e =\u003e { safeJSONCallback(e.target.value, setRightJSONStr) }} /\u003e\n            \u003c/SimpleForm\u003e\n            \u003cSimpleForm label=\"JYCM Result\"\u003e\n                \u003ctextarea\n                    style={{ width: \"100%\", wordBreak: \"break-all\" }}\n                    rows={5}\n                    defaultValue={jycmResultStr}\n                    onChange={e =\u003e { safeJSONCallback(e.target.value, setJYCMResultStr) }} /\u003e\n            \u003c/SimpleForm\u003e\n        \u003c/div\u003e\n\n        \u003cdiv style={{ height: \"800px\", width: \"100%\", border: \"1px solid red\", marginTop: \"15px\" }}\u003e\n            {/********** any component under this provider can have access to the diff etc. \n            You can control the editor very easy.   **********/}\n            \u003cJYCMContext.Provider value={jycmContextValue}\u003e\n                \u003cJYCMRender leftTitle=\"BenchMark\" rightTitle=\"Actual\"/\u003e\n            \u003c/JYCMContext.Provider\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n}\n\nReactDOM.render(\n    \u003cApp /\u003e,\n    document.getElementById('root') as HTMLElement\n)\n\n```\n# API\n## JYCMContext \n\n`JYCMContext` Shared state across the context.\n\nIt gives you \n\nYou can as follow \n\n```tsx\n\nimport React, { FC, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport {\n  JYCMRender,\n  JYCMContext,\n  IUseJYCMProps,\n  IJYCMRenderProps,\n  useJYCM,\n} from \"react-jycm-viewer\";\n\nconst CustomApp: React.FC\u003cany\u003e = () =\u003e {\n  const { pairInfo, activeLeftJsonPath, activeRightJsonPath } =\n    useJYCMContext();\n  return (\n    \u003cdiv\u003e\n      \u003cFormBlock\n        label=\"activeLeftJsonPath\"\n        content={activeLeftJsonPath.join(\"-\u003e\")}\n      /\u003e\n      \u003cFormBlock\n        label=\"activeRightJsonPath\"\n        content={activeRightJsonPath.join(\"-\u003e\")}\n      /\u003e\n      \u003cFormBlock label=\"Pair Info\" content={pairInfo} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst App: React.FC\u003cany\u003e = ({ leftJsonStr, rightJsonStr, diffResult, ...args }) =\u003e {\n  const jycmContextValue = useJYCM({\n    leftJsonStr,\n    rightJsonStr,\n    diffResult,\n  });\n\n  return (\n    \u003cdiv style={{ height: \"100%\" }}\u003e\n      \u003cJYCMContext.Provider value={jycmContextValue}\u003e\n        \u003cdiv style={{ display: \"flex\", alignItems: \"center\", height: \"100%\" }}\u003e\n          \u003cdiv style={{ flexGrow: 1, height: \"100%\" }}\u003e\n            \u003cJYCMRender {...args} /\u003e\n          \u003c/div\u003e\n          \u003cdiv style={{ width: \"200px\" }}\u003e\n            \u003cCustomApp /\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/JYCMContext.Provider\u003e\n    \u003c/div\u003e\n  );\n};\n\nReactDOM.render(\n    \u003cApp /\u003e,\n    document.getElementById('root') as HTMLElement\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feggachecat%2Freact-jycm-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feggachecat%2Freact-jycm-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feggachecat%2Freact-jycm-viewer/lists"}