React Git JSON Logger

React component for rendering git repository metadata

Note

Use in tandem with Git JSON Logger CLI for easiest implementation

Release Notes

Get Started

• Install packages

npm i react-git-json-logger
npm i -D git-json-logger-cli

• Add CLI script to package.json (see API reference for a list of command options). This will generate a JSON file containing metadata about the current git repository.

Note

Don't forget to add the name of the auto-generated JSON file to your project's .gitignore.

"scripts": {
    "git-logger":"git-logger",
}

• Add pre* scripts so that the metadata file is generated automatically before builds:

    // In a CRA project, for example:
"scripts": {
    "prestart": "git-logger --outdir ./src",
    "prebuild": "git-logger --outdir ./src",
}

• import GitMetadata component and JSON file generated by git-logger script

import {GitMetadata} from "react-git-json-logger";
import gitMetadata from 'path/to/git-metadata.json' // output filepath is determined by `git-logger` script above

export Demo = props => {
    return (
        <div>
            <h3>Git Metadata</h3>
            <GitMetadata metadata={gitMetadata}>
        </div>
    )
}

• The current git user, latest commit hash/date, current branch and list of remote URL's will be displayed:

Custom Rendering

If the default UI is not desirable, GitMetadata can receive a prop called render which takes a function and provides it the raw metadata object as a parameter:

<GitMetadata
  metadata={gitMetadata}
  render={(metadata) => <p>Latest Commit: {metadata.commit}</p>}
/>

Typescript

A declaration file is provided which contains type definitions for GitMetadata, IGitMetadata, and IGitMetadataProps which is helpful for enforcing types on your own custom components.

import {
  IGitMetadataProps,
  IGitMetadata,
  GitMetadata,
} from "react-git-json-logger";

Troubleshooting

• Make sure your project is a git repository and that it has at least one commit in its history, or else the git-logger CLI script will fail.

API Reference

IGitMetadata Attribute Name | Type | Description --- | --- | --- user | string | Current git repository user commit | string | Hash of latest commit branch | string | Current branch date | string | ISO date string of latest commit remotes | Array<{name: string, url: string}> | List of remote repository URL's linked to the current git repository

IGitMetadataProps | Attribute Name | Type | Description | | -------------- | -------------- | ----------- | | metadata (required) | IMetadata | Object representing raw git repository data | render (optional) | React.FC<IGitMetadata> | Overrides default UI

GitMetadata Type | Description | --- | --- | React.FC<IGitMetadataProps> | React component for rendering git repository metadata