react-github-activity-calendar
v3.0.2
Published
 [](https://www.npmjs.com/package/react-github-activity-calendar) [ {
const githubApiKey = ""; // <your-github-api-key>
const githubUserName = ""; // <github-username>
const bgcolor = "";
const textColor = "";
return (
<div className="App">
<Graph
userName={githubUserName}
backgroundColor={bgcolor}
githubApiKey={githubApiKey}
color={textColor}
enableAnimations={false} // optional prop to disable animations
/>
</div>
);
}
export default App;
Props
userName
(required): The Github username for which to display activity.githubApiKey
(required): Your Github API key. It is requried that you generate your own API key from Github and pass it as a prop to the component If no API key is provided, the component will not be able to make requests to the Github API, to display your activity. I have provided steps to generate your api token below.backgroundColor
(optional): The background color of the calendar (hex color code, e.g.#ffffff
).color
(optional): The color of the text and github icon(hex color code, e.g.#000000
).
Generating a Github API Key
In case you forget where to see your tokens: https://github.com/settings/tokens To generate a Github API key, follow these steps:
- Sign in to your Github account.
- Go to your Settings page.
- Click on Developer settings in the left-hand menu.
- Click on Personal access tokens in the left-hand menu.
- Click on Generate new token.
- Give your token a name and select the scope to read:user.
- Click on Generate token.
- Copy the token and keep it somewhere safe.