react-git-json-logger
v1.0.0
Published
React component for displaying git metadata
Downloads
11
Readme
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 bygit-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