Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
assets
src
CHANGELOG.md
README.md
package.json
rollup.config.js
tsconfig.json

README.md

@gitgraph/react

version Changelog

Draw pretty git graphs with React.

This is the React rendering library of GitGraph.js.

Get started

You need to have npm installed.

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

Now you can use the <GitGraph> component:

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 = gitgraph.branch("develop");
        develop.commit("Add TypeScript");

        const aFeature = gitgraph.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

More examples

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

You can’t perform that action at this time.