A simple and beautiful text diff viewer component made with Diff and React. Inspired by the Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more.

A simple and beautiful text diff viewer component made with Diff and React. - Aeolun/react-diff-viewer-continued

AboutContinuation of a simple and beautiful text diff viewer component made with diff and React558,855Weekly Downloads

A simple and beautiful text diff viewer for React

Learn more about known react-diff-viewer-continued 3.2.1 vulnerabilities and licenses detected.

May 7, 2024 - react-diff-viewer-continued-DEMO by christ_cogni_con using antd, loader-utils, react, react-diff-view, react-diff-viewer-continued, react-dom, react-scripts

January 10, 2025 - Aeolun / react-diff-viewer-continued Public forked from praneshr/react-diff-viewer · Notifications · You must be signed in to change notification settings · Fork 49 · Star 205 · New issueCopy link · New issueCopy link · Open · Open · Support for React 19#63 ·

June 27, 2023 - react-diff-viewer-continued demos by ashesofphoenix using loader-utils, prismjs, react, react-diff-view, react-diff-viewer-continued, react-dom, react-scripts

Continuation of a simple and beautiful text diff viewer component made with diff and React · github.com/aeolun/react-diff-viewer-continued · aeolun/react-diff-viewer-continued · 403 lines (334 loc) • 22.4 kB · Markdown · View Raw · 1 · 2 · 3 · 4 · 5 · 6 ·

To see how react-diff-viewer-continued compares with react-diff-view and react-diff-viewer, check out the comparison: Comparing react-diff-view vs react-diff-viewer vs react-diff-viewer-continued. ... react-diff-viewer is a React component that allows developers to easily display differences between two pieces of text or code.

import { Viewer } from 'json-diff-kit'; import type { DiffResult } from 'json-diff-kit'; import 'json-diff-kit/dist/viewer.css'; interface PageProps { diff: [DiffResult[], DiffResult[]]; } const Page: React.FC<PageProps> = props => { return ( <Viewer diff={props.diff} // required indent={4} // default `2` lineNumbers={true} // default `false` highlightInlineDiff={true} // default `false` inlineDiffOptions={{ mode: 'word', // default `"char"`, but `"word"` may be more useful wordSeparator: ' ', // default `""`, but `" "` is more useful for sentences }} /> ); };

May 29, 2021 - Add a Diff Display into a React App with the jsdiff Library Sometimes, we may want to show the difference between 2 pieces of text to the user. We can do this easily with the jsdiff library. In this …

March 15, 2023 - react difference viewer by prakruti.ukani using loader-utils, react, react-diff-viewer-continued, react-dom, react-scripts

May 22, 2020 - Inspired from Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more. It is highly customizable and it supports almost all languages. ... resetCodeBlocks() - Resets the expanded code blocks to it's initial state. Return true on successful reset and false during unsuccessful reset. Syntax highlighting is a bit tricky when combined with diff. Here, React Diff Viewer provides a simple render prop API to handle syntax highlighting.

Free Online Tools like Code Beautifiers, Code Formatters, Editors, Viewers, Minifier, Validators, Converters for Developers: XML, JSON, CSS, JavaScript, Java, C#, MXML, SQL, CSV, Excel

November 1, 2022 - json-diff-visualize by therealdrtroll using json-diff-kit, json-diff-viewer, react, react-dom, react-json-view-compare, react-scripts

A simple and beautiful text diff viewer component made with Diff and React. Inspired by the Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more.