https://github.com/jakemmarsh/react-native-diff-view

A React Native module for parsing and displaying git diffs.
https://github.com/jakemmarsh/react-native-diff-view

git git-diff react react-native

Last synced: about 4 hours ago
JSON representation

A React Native module for parsing and displaying git diffs.

• Host: GitHub
• URL: https://github.com/jakemmarsh/react-native-diff-view
• Owner: jakemmarsh
• License: mit
• Created: 2019-10-08T14:58:02.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T04:57:30.000Z (almost 2 years ago)
• Last Synced: 2024-10-05T20:35:03.185Z (about 1 month ago)
• Topics: git, git-diff, react, react-native
• Language: TypeScript
• Size: 1.05 MB
• Stars: 16
• Watchers: 4
• Forks: 2
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-diff-view [![Build Status](https://travis-ci.org/jakemmarsh/react-native-diff-view.svg?branch=master)](https://travis-ci.org/jakemmarsh/react-native-diff-view) ![David](https://img.shields.io/david/jakemmarsh/react-native-diff-view)

A React Native module for parsing and displaying git diffs. This library was heavily inspired by, and borrows code from, [react-diff-view](https://github.com/otakustay/react-diff-view).

## Overview

The purpose of this library is to parse and render a unified diff view for any provided diff(s). The flexible widget system also allows for rendering of custom elements on a per-line (or "change") basis. The end result will look something like this:

![Example diff with a comment widget](./example.png)

## Getting Started

`npm install --save react-native-diff-view`

## Usage

### Parsing Diffs

The top-level `parseDiff(diff: string): IFile[]` export is a wrapper around [gitdiff-parser](https://www.npmjs.com/package/gitdiff-parser), but strongly typed

and with some extra options:

- `nearbySequence: 'zip' | undefined` — the action to take when nearby sequences are encountered.

### Rendering Diff Hunks

The top-level `Diff` export is a component to be used for rendering a single diff. Here's a simple example:

```tsx

import React from 'react';

import { View, ScrollView } from 'react-native';

import { parseDiff, Diff, Hunk } from 'react-native-diff-view';

const App = ({ diffText }) => {

    const files = parseDiff(diffText);

    const renderFile = ({ oldRevision, newRevision, type, hunks }) => (

      

        

            {(hunks) => hunks.map((hunk) => )}

        

      

    );

    return (

      

        {files.map(renderFile)}

      

    );

};

```

`props.children`, in this case, is a function that takes an array of `IHunk` and returns the rendered element(s). This is optional,

and if not provided the hunks will be rendered as default `` components.

### Wrapping Hunks in Decorations

A decoration is a way to wrap a `` component with customized content.

A `` component is a simple passthrough of `props.children`, which can be either a single element or an array of two:

- A single element: this will be rendered in the entire row.

- An array containing two elements: The first element will be rendered in gutter position, the second will be rendered in code position.

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

```tsx

import React from 'react';

import { Diff, Hunk, Decoration } from 'react-native-diff-view';

const renderHunk = (hunk) => [

  

      {hunk.content}

  ,

   hunk={hunk} />,

];

const DiffFile = ({ diffType, hunks }) => (

  

      {hunks.map(renderHunk)}

  

);

```

### Rendering Widgets

As mentioned above, widgets can be used to render custom element(s) on a per-change, or per-line, basis. These will be rendered

immediately below their corresponding line. Only the first match will be rendered.

Here's a basic example that adds a warning on long lines:

```tsx

import React from 'react';

import { Text } from 'react-native';

import { parseDiff, getChangeKey, Diff } from 'react-native-diff-view';

const getWidgets = (hunks) => {

    const changes = hunks.reduce((result, {changes}) => [...result, ...changes], []);

    const longLines = changes.filter(({content}) => content.length > 120);

    return longLines.reduce(

      (widgets, change) => {

        const changeKey = getChangeKey(change);

        return {

          ...widgets,

          [changeKey]: Line too long

        };

      },

      {},

    );

};

const App = ({diffText}) => {

    const files = parseDiff(diffText);

    return (

        


            {files.map(({hunks}, i) => )}

        

    );

};

```


### Styling

The following props are supported but optional on the top-level `` component:

- `style: ViewStyle` — styling to be applied to the top-level `Diff` view.

- `lineStyle: ViewStyle` — styling to be applied on each individual change line.

- `gutterStyle: ViewStyle` — styling to be applied on the gutter of each individual change.

- `contentStyle: ViewStyle` — styling to be applied to the code content of each individual change.

### Events

The following events are supported but optional on the top-level `` component:

- `onChangePress(change: IChange) => any` — if provided, this will be triggered any time a user presses on a specific

line or change in a diff.

## Contributing

🎊 Thanks for considering contributing! Issue reports and pull requests are always welcome.

To get started:

1. `git clone https://github.com/jakemmarsh/react-native-diff-view.git`

2. `cd react-native-diff-view`

3. `npm install`

To test your changes before opening a PR:

`npm test`