<!-- Somewhere in the DOM -->
<div id="gitgraph"></div>
import { createGitgraph } from "@gitgraph/js";
const graphContainer = document.getElementById("gitgraph");
const gitgraph = createGitgraph(graphContainer);
import { Gitgraph } from "@gitgraph/react";
// Now you can use the component =>
<Gitgraph>{(gitgraph) => {}}</Gitgraph>;
gitgraph
👈 👏 🎉
You can customize the graph with options
// @gitgraph/js − Pass `options` as second param
const gitgraph = createGitgraph(graphContainer, options);
// @gitgraph/react − Provide `options` as props
<Gitgraph options={options}>{(gitgraph) => {}}</Gitgraph>
options.orientation
Default is vertical
options.orientation
With "vertical-reverse"
options.orientation
With "horizontal"
You also have "horizontal-reverse"
options.template
Default is "metro"
options.template
With "blackarrow"
options.template
You can create your own with templateExtend()
:
const options = {
template: templateExtend("metro", {
colors: ["red", "blue", "orange"],
// …
}),
};
options.mode
You can opt-in "compact"
It renders commit messages in tooltips
options
gitgraph.branch({
name: "develop",
style: {
// Specific style for this branch
},
});
options
master.commit({
subject: "Add feature",
body: "More details about the feature…",
dotText: "❤️",
tag: "v1.2",
style: {
// Specific style for this commit
},
});
options
master.merge({
branch: develop,
fastForward: true,
commitOptions: {
// Every valid `options` for a commit
},
});
master.commit({
subject: "Add tests",
onMessageClick(commit) {
alert(`Commit ${commit.hash} selected`);
},
});
But also: onMouseOver
, onMouseOut
, etc.
@gitgraph/js
@gitgraph/react