@colining-gitgraph/react

@gitgraph/react

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 = 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:

More examples

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