# @colining-gitgraph/react

> Draw pretty git graphs in the browser, with React

Latest version **1.6.1** (published 2023-07-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @colining-gitgraph/react
pnpm add @colining-gitgraph/react
yarn add @colining-gitgraph/react
bun add @colining-gitgraph/react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.1 |
| Published | 2023-07-21 |
| First published | 2023-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 349.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3067 |
| Author | Nicolas Carlo |
| Maintainers | colinin |
| Keywords | react, git, graph, javascript |

## Links

- npm: https://www.npmjs.com/package/@colining-gitgraph/react
- Repository: https://github.com/nicoespeon/gitgraph.js
- Homepage: https://github.com/nicoespeon/gitgraph.js#readme
- Issues: https://github.com/nicoespeon/gitgraph.js/issues
- npm.io page: https://npm.io/package/@colining-gitgraph/react

## Dependencies (1)

- [@colining-gitgraph/core](https://npm.io/package/@colining-gitgraph/core.md) 1.5.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.6.1 (latest) — 2023-07-21

## README

# `@gitgraph/react`

[![version](https://img.shields.io/npm/v/@gitgraph/react.svg?logo=npm)](https://www.npmjs.com/package/@gitgraph/react)
[![Changelog](https://img.shields.io/badge/%F0%9F%93%94-changelog-CD9523.svg)](https://github.com/nicoespeon/gitgraph.js/blob/master/packages/gitgraph-react/CHANGELOG.md)

Draw pretty git graphs with React.

> This is the React rendering library of [GitGraph.js][gitgraph-repo].

## Get started

> You need to have [npm][get-npm] installed.

Install the package with npm: `npm i --save @gitgraph/react`

Now you can use the `<GitGraph>` component:

```jsx
const { Gitgraph } = require("@gitgraph/react");

function MyComponent() {
  return (
    <Gitgraph>
      {(gitgraph) => {
        // Simulate git commands with Gitgraph API.
        const master = gitgraph.branch("master");
        master.commit("Initial commit");

        const develop = master.branch("develop");
        develop.commit("Add TypeScript");

        const aFeature = develop.branch("a-feature");
        aFeature
          .commit("Make it work")
          .commit("Make it right")
          .commit("Make it fast");

        develop.merge(aFeature);
        develop.commit("Prepare v1");

        master.merge(develop).tag("v1.0.0");
      }}
    </Gitgraph>
  );
}
```

`<MyComponent>` will render the following graph:

![Example of usage][assets-example]

## More examples

[A bunch of scenarios][stories] has been simulated in our Storybook. You can give them a look 👀

[get-npm]: https://www.npmjs.com/get-npm
[gitgraph-repo]: https://github.com/nicoespeon/gitgraph.js/
[stories]: https://github.com/nicoespeon/gitgraph.js/tree/master/packages/stories/src/gitgraph-react/
[assets-example]: https://github.com/nicoespeon/gitgraph.js/blob/master/packages/gitgraph-react/assets/example-usage.png?raw=true

---
_Source: https://npm.io/package/@colining-gitgraph/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._