{"id":19501146,"url":"https://github.com/gitbookio/react-rich-diff","last_synced_at":"2025-07-08T06:06:03.806Z","repository":{"id":57343656,"uuid":"79161706","full_name":"GitbookIO/react-rich-diff","owner":"GitbookIO","description":"React component to render rich diff between two documents (Markdown, HTML)","archived":false,"fork":false,"pushed_at":"2017-10-30T15:53:34.000Z","size":634,"stargazers_count":56,"open_issues_count":5,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-08T06:02:42.595Z","etag":null,"topics":["diff","markdown","react","rich-text-editor"],"latest_commit_sha":null,"homepage":"https://gitbookio.github.io/react-rich-diff/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GitbookIO.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-16T21:35:39.000Z","updated_at":"2025-05-11T06:36:53.000Z","dependencies_parsed_at":"2022-09-12T07:00:31.677Z","dependency_job_id":null,"html_url":"https://github.com/GitbookIO/react-rich-diff","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/GitbookIO/react-rich-diff","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitbookIO%2Freact-rich-diff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitbookIO%2Freact-rich-diff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitbookIO%2Freact-rich-diff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitbookIO%2Freact-rich-diff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GitbookIO","download_url":"https://codeload.github.com/GitbookIO/react-rich-diff/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitbookIO%2Freact-rich-diff/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264206952,"owners_count":23572697,"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":["diff","markdown","react","rich-text-editor"],"created_at":"2024-11-10T22:11:38.113Z","updated_at":"2025-07-08T06:06:03.785Z","avatar_url":"https://github.com/GitbookIO.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-rich-diff\n\n[![Build Status](https://travis-ci.org/GitbookIO/react-rich-diff.svg?branch=master)](https://travis-ci.org/GitbookIO/react-rich-diff) [![NPM version](https://badge.fury.io/js/react-rich-diff.svg)](http://badge.fury.io/js/react-rich-diff)\n\nReact component to display a rich diff between two [Markup-it](https://github.com/GitbookIO/markup-it) documents.\n\n### Installation\n\n```\n$ npm install react-rich-diff --save\n```\n\n### Usage\n\n```js\nconst React = require('react');\nconst RichDiff = require('react-rich-diff');\nconst MarkupIt = require('markup-it');\nconst markdown = require('markup-it/lib/markdown');\n\nconst state = MarkupIt.State.create(markdown);\n\nconst MyApp = React.createClass({\n    render() {\n        const original = state.deserializeToDocument('Hello **World**');\n        const modified = state.deserializeToDocument('Hello **World 2**');\n\n        const state = RichDiff.State.create(original, modified);\n\n        return (\n            \u003cRichDiff\n                state={state}\n                /\u003e\n        )\n    }\n})\n```\n\n### CSS\n\n`react-rich-diff` creates HTML elements with classes `diff-\u003ckind\u003e-\u003ctype`.\n\n`kind` can be one of `block`, `inline` or `character`.\n`type` can be one of `added`, `removed` or `modified`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitbookio%2Freact-rich-diff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitbookio%2Freact-rich-diff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitbookio%2Freact-rich-diff/lists"}