Documentation

Showcase your GitHub profile, organization or repository information.

Install

React Social Github is available as the react-social-github package on npm.

$ npm install react-social-github --save

Usage

import { Github } from 'react-social-github';

Reference

Options

Name	Type	Default	Description
user	string	none	Specify the user or organization to show info about.
repo	string	none	Specify the repository to show info about. Requires "user"
objUser	object	none	Specify user or organization object to show info about. The attribute "user" is not considered if the object is passed.
objRepo	object	none	Set repository object to show info about. The attributes "user" and "repo" are not considered if the object is passed.
type	string	widget	Specify the type of the component

Types

Widget

The tooltip is inserted as a block element. This is the default type and doesn't require any configuration. The option type="widget" can be declared in the component if desired.

Example

<Github user="facebook" repo="react"></Github>

{/* same as */}

<Github user="facebook" repo="react" type="widget"></Github>

Link

The tooltip is anchored in an inline link. The option type="link" must be declared in the component.

Example

<Github user="hackbit" type="link">Hover Here</Github>

<Github user="vandreleal" repo="vandreleal.github.io" type="link">Hover Here</Github>

Options

Name	Type	Default	Description
linkText	string	"Github"	Link text

Button

The tooltip is anchored in a button. The option type="button" must be declared in the component.

Options

Name	Type	Default	Description
iconColor	string	#000	Color name, RGB value, hexadecimal value, HSL value or HWB value
iconWidth	number	48px	Width followed by unit
iconHeight	number	48px	Height followed by unit
fab	bool	false	Floating Action Button
fabCorner	string	bottom-right	Position of the FAB. Possible values: bottom-right, bottom-left, top-right, top-left
tooltipPosition	string	auto	Force a specific position to show the tooltip. Values: left, right, top, bottom, auto (will make the tooltip adaptive to avoid escaping from the view)
tooltipOnHover	bool	true	Enable/disable mouse hover events

Example

<Github user="facebook" type="tooltip" tooltipOnHover={false} fab={true} fabCorner="top-left" iconColor="#3b5998" iconWidth={64} iconHeight={64}></Github>

<Github user="GustavoKatel" type="tooltip" tooltipOnHover={true} fab={true} fabCorner="bottom-left" iconColor="#888" iconWidth={32} iconHeight={32}></Github>

Open source

React Social Github is available on GitHub for downloading, forking, or contributing.

License

The MIT License (MIT)