Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-diff-view

Package Overview
Dependencies
Maintainers
1
Versions
66
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-diff-view - npm Package Compare versions

Comparing version 2.4.7 to 2.4.8

2

package.json
{
"name": "react-diff-view",
"version": "2.4.7",
"version": "2.4.8",
"description": "A git diff component to consume the git unified diff output.",

@@ -5,0 +5,0 @@ "main": "cjs/index.js",

@@ -71,3 +71,3 @@ # react-diff-view

This is the normal behavior, which will displaed as 3 lines of deletion, 1 line of modification and 3 lines of addition:
This is the normal behavior, which will displayed as 3 lines of deletion, 1 line of modification and 3 lines of addition:

@@ -119,8 +119,8 @@ ![Normal sequence behavior](https://raw.githubusercontent.com/otakustay/react-diff-view/master/screenshots/sequence-normal.png)

The children is optional if you only need all hunks to be displaed, however you can use this function children to add custome events or classes to hunks.
The children is optional if you only need all hunks to be displayed, however you can use this function children to add custom events or classes to hunks.
As you can see, `Diff` component requires a `hunks` prop as well as a function `children` prop which receivs the `hunks` prop as its argument, this may looks redundant but actually very useful when work with HOCs modifying hunks. For example, we have a HOC to remove all normal changes:
As you can see, `Diff` component requires a `hunks` prop as well as a function `children` prop which receive the `hunks` prop as its argument, this may looks redundant but actually very useful when work with HOCs modifying hunks. For example, we have a HOC to remove all normal changes:
```jsx
const filterOuteNormalChanges = hunk => {
const filterOutNormalChanges = hunk => {
return {

@@ -144,3 +144,3 @@ ...hunk,

const MyDiff = removeNomalChanges(Diff);
const MyDiff = removeNormalChanges(Diff);
```

@@ -193,3 +193,3 @@

A very simple use case of `Decoration` is to provide a summary infomation of hunk:
A very simple use case of `Decoration` is to provide a summary information of hunk:

@@ -228,3 +228,3 @@ ```jsx

In some cases we need functions like commenting on change, `react-diff-view` provides an extensible solution called **widget** to archive such senarios.
In some cases we need functions like commenting on change, `react-diff-view` provides an extensible solution called **widget** to archive such scenarios.

@@ -277,3 +277,3 @@ A widget is any react element bound to a change object, a widget is configured in an object with `change` and `element` property, when rendering diff changes, if there is a widget object with the same `change` object, the `element` will be rendered below the line of code.

`react-diff-view` includes a bunch of css variables (custom properties) to customize the prensentation of diff in [supported browsers](https://caniuse.com/#feat=css-variables), these includes:
`react-diff-view` includes a bunch of css variables (custom properties) to customize the presentation of diff in [supported browsers](https://caniuse.com/#feat=css-variables), these includes:

@@ -302,3 +302,3 @@ ```css

You can override styles on certian css classes to customize the appearance of `react-diff-view`, here is a list of css classes generated by component:
You can override styles on certain css classes to customize the appearance of `react-diff-view`, here is a list of css classes generated by component:

@@ -308,3 +308,3 @@ - `diff`: The diff container, a `<table>` element.

- `diff-hunk`: The `<tbody>` element representing a diff hunk.
- `diff-decoration`: The `<tr>` element reprensenting the decoration row.
- `diff-decoration`: The `<tr>` element representing the decoration row.
- `diff-decoration-gutter`: The `<td>` element corresponding to gutter within decoration.

@@ -369,3 +369,3 @@ - `diff-decoration-content`: The `<td>` element corresponding to code content within decoration.

Each event callback receivs an object with key `change` and `side`, the `side` property is `undefined` in unified mode, in split mode it could be either `"old"` and `"new"` responding to the triggering element.
Each event callback receive an object with key `change` and `side`, the `side` property is `undefined` in unified mode, in split mode it could be either `"old"` and `"new"` responding to the triggering element.

@@ -463,3 +463,3 @@ One of the common cases is to add code selecting functionality. This can be archived simply by passing an `onClick` event to gutter and coe and manipulating the `selectedChanges` prop:

By giving an array of ranges on both old and new side, the token system will pick them out of each line, you should pass a `renderToken` function prop to `Diff` component to customize your render implement of customzied token. The `renderToken` is a simple function receiving `(token, defaultRender)` as arguments:
By giving an array of ranges on both old and new side, the token system will pick them out of each line, you should pass a `renderToken` function prop to `Diff` component to customize your render implement of customized token. The `renderToken` is a simple function receiving `(token, defaultRender)` as arguments:

@@ -641,3 +641,3 @@ ```jsx

- Make `insertHunk` work when hunks have overlaps.
- Add `referenceRawCodeOrLines` parameter to `addStubHunk` function to automatically determineswhether a stub hunk is required.
- Add `referenceRawCodeOrLines` parameter to `addStubHunk` function to automatically determines whether a stub hunk is required.
- Add `computeCorresponding(Old|New)LineNumber` functions to get corresponding line number from one side to another side.

@@ -644,0 +644,0 @@ - Add `findChangeBy(Old|New)LineNumber` functions to find specific change in hunks.

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc