How to use @gitgraph/react - 10 common examples
To help you get started, we’ve selected a few @gitgraph/react examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
nicoespeon / gitgraph.js / packages / stories / src / gitgraph-react / 1-basic-usage.stories.tsx View on Github 
.add("compact mode", () => (
{(gitgraph) => {
const master = gitgraph
.branch("master")
.commit()
.commit();
// Branch has more commits.
const develop = gitgraph.branch("develop").commit();
master.merge(develop);
// Branch & master have as much commits.
const feat1 = gitgraph.branch("feat1").commit();
master.commit();.add("horizontal", () => (
{(gitgraph) => {
const master = gitgraph.branch("master").commit("Initial commit");
// Shouldn't render tags on horizontal mode
master.tag("v1.0");
const develop = gitgraph.branch("develop");
develop.commit("one");
master.commit("two");
develop.commit("three");
master.merge(develop);
master.commit();
}}.add("horizontal reverse (black arrow)", () => (
{(gitgraph) => {
const master = gitgraph.branch("master").commit("Initial commit");
const develop = gitgraph.branch("develop");
develop.commit("one");
master.commit("two");
develop.commit("three");
master.merge(develop);
master.commit();
}}
))
.add("vertical reverse (commit after merge)", () => (.add("blackArrow", () => (
{(gitgraph) => {
const master = gitgraph
.branch("master")
.commit("one")
.commit("two")
.commit("three");
const develop = gitgraph.branch("develop").commit("four");
master.commit("five").tag("important");
master.merge(develop);
const feat1 = gitgraph.branch("feat1");
master.commit().tag("v1");.add("blackArrow with reverse arrow", () => (
{(gitgraph) => {
const master = gitgraph
.branch("master")
.commit("one")
.commit("two")
.commit("three");
const develop = gitgraph.branch("develop").commit("four");
master.commit("five");
master.merge(develop);
}}
)).add("blackArrow", () => (
{(gitgraph) => {
const master = gitgraph
.branch("master")
.commit("one")
.commit("two")
.commit("three");
const develop = gitgraph.branch("develop").commit("four");
master.commit("five").tag("important");
master.merge(develop);
const feat1 = gitgraph.branch("feat1");
master.commit().tag("v1");.add("horizontal (black arrow)", () => (
{(gitgraph) => {
const master = gitgraph.branch("master").commit("Initial commit");
const develop = gitgraph.branch("develop");
develop.commit("one");
master.commit("two");
develop.commit("three");
master.merge(develop);
master.commit();
}}
))
.add("horizontal reverse (black arrow)", () => (.add("blackArrow with reverse arrow", () => (
{(gitgraph) => {
const master = gitgraph
.branch("master")
.commit("one")
.commit("two")
.commit("three");
const develop = gitgraph.branch("develop").commit("four");
master.commit("five");
master.merge(develop);
}}
)).add("metro", () => (
{(gitgraph) => {
const master = gitgraph
.branch("master")
.commit("one")
.commit("two")
.commit("three");
const develop = gitgraph.branch("develop").commit("four");
master.merge(develop);
}}
))
.add("blackArrow", () => (function BasicScenario(props) {
return (
{(gitgraph) => {
const master = gitgraph
.branch("master")
.commit("Init the project")
.commit("Add README")
.commit("Add tests");
master.tag("v1.0");
const newFeature = gitgraph.branch("new-feature");@gitgraph/react
Draw pretty git graphs in the browser, with React
