{"id":15636678,"url":"https://github.com/neighborhood999/react-gh-like-diff","last_synced_at":"2025-04-12T14:21:16.448Z","repository":{"id":24008453,"uuid":"99870557","full_name":"neighborhood999/react-gh-like-diff","owner":"neighborhood999","description":"➕➖ The react component to generate pretty HTML for comparing commits or text.","archived":false,"fork":false,"pushed_at":"2025-01-13T05:40:54.000Z","size":3272,"stargazers_count":121,"open_issues_count":67,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-03T13:19:29.844Z","etag":null,"topics":["comparison","diff","diff2html","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/neighborhood999.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-10T02:07:00.000Z","updated_at":"2025-02-23T11:33:21.000Z","dependencies_parsed_at":"2024-06-18T15:41:04.339Z","dependency_job_id":"954d203f-4306-43c1-97a8-9b471c6b7743","html_url":"https://github.com/neighborhood999/react-gh-like-diff","commit_stats":{"total_commits":216,"total_committers":7,"mean_commits":"30.857142857142858","dds":0.662037037037037,"last_synced_commit":"cd48bc06f8b7962a350884f5e5bac2e228171689"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neighborhood999%2Freact-gh-like-diff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neighborhood999%2Freact-gh-like-diff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neighborhood999%2Freact-gh-like-diff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neighborhood999%2Freact-gh-like-diff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neighborhood999","download_url":"https://codeload.github.com/neighborhood999/react-gh-like-diff/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248578874,"owners_count":21127714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["comparison","diff","diff2html","react"],"created_at":"2024-10-03T11:06:04.754Z","updated_at":"2025-04-12T14:21:16.411Z","avatar_url":"https://github.com/neighborhood999.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-gh-like-diff\n\n[![npm](https://flat.badgen.net/npm/v/react-gh-like-diff)](https://www.npmjs.com/package/react-gh-like-diff)\n[![Build Status](https://github.com/neighborhood999/react-gh-like-diff/workflows/Node%20CI/badge.svg)](https://github.com/neighborhood999/react-gh-like-diff/actions)\n[![Maintainability](https://api.codeclimate.com/v1/badges/4cff540dfa1df3feadd3/maintainability)](https://codeclimate.com/github/neighborhood999/react-gh-like-diff/maintainability)\n[![codecov](https://flat.badgen.net/codecov/c/github/neighborhood999/react-gh-like-diff)](https://codecov.io/gh/neighborhood999/react-gh-like-diff)\n[![styled with prettier](https://flat.badgen.net/badge/style%20with/prettier/ff69b4)](https://github.com/prettier/prettier)\n![](https://flat.badgen.net/badge/gzip/3%20kB/green)\n![](https://flat.badgen.net/badge/module%20formats/cjs,%20esm,%20umd/green)\n\n![react-gh-like-diff](./screenshot/diff-demo.png)\n\n\u003e Generate Github like comparison based on [diff2html](https://github.com/rtfpessoa/diff2html).\n\nYou can compare string or given [unified diff](http://www.gnu.org/software/diffutils/manual/html_node/Example-Unified.html#Example-Unified) to generate pretty HTML.\n\n## Demo\n\n[![Edit React Github Like Diff Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/qvx7438xo6)\n\n## Installation\n\n```sh\nyarn add react-gh-like-diff\n\n# or\n\nnpm install react-gh-like-diff --save\n```\n\n## Configuration\n\n[react-gh-like-diff](https://github.com/neighborhood999/react-gh-like-diff) is based on [diff2html](https://github.com/rtfpessoa/diff2html). The default configuration:\n\n```js\nconst defaultOptions = {\n  originalFileName: 'Unknown-File-Name',\n  updatedFileName: 'Unknown-File-Name',\n  inputFormat: 'diff',\n  outputFormat: 'side-by-side',\n  showFiles: false,\n  matching: 'none',\n  matchWordsThreshold: 0.25,\n  matchingMaxComparisons: 2500,\n  maxLineSizeInBlockForComparison: 200,\n  maxLineLengthHighlight: 10000,\n  renderNothingWhenEmpty: false\n};\n```\n\nYou can custom options for you want, just pass `options` as props. The configuration you can reference [here](https://github.com/rtfpessoa/diff2html#configuration). :mag_right:\n\n## Style\n\nImport css style make sure render correctly:\n\n```js\nimport 'react-gh-like-diff/dist/css/diff2html.min.css';\n```\n\nYou also can reference [examples](https://github.com/neighborhood999/react-gh-like-diff/blob/master/example/compare-markdown/src/App.js).\n\n## Props\n\n### past\n\n\u003e `string` | defaults to `''`\n\nPassing past string as `past` prop with `current` prop for comparison.\n\n### current\n\n\u003e `string` | defaults to `''`\n\nPassing current string as `current` prop with `past` prop for comparison.\n\n### diffString\n\n\u003e `string` | defaults to `''`\n\nPassing unified diff as prop to generate pretty HTML.\n\n### options\n\n\u003e `object` | optional, See [here](https://github.com/neighborhood999/react-gh-like-diff/blob/master/src/utils.js#L7)\n\nReference diff2html docs for [extra configuration](https://github.com/rtfpessoa/diff2html#configuration) setting.\n\n## Inspiration\n\n[nakajmg - gh-diff-html](https://github.com/nakajmg/gh-diff-html)\n\n## LICENSE\n\nMIT © [Peng Jie](https://github.com/neighborhood999)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneighborhood999%2Freact-gh-like-diff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneighborhood999%2Freact-gh-like-diff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneighborhood999%2Freact-gh-like-diff/lists"}