Showcase your GitHub profile, organization or repository information.
React Social Github is available as the react-social-github
package on npm.
$ npm install react-social-github --save
import { Github } from 'react-social-github';
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 |
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.
<Github user="facebook" repo="react"></Github>
{/* same as */}
<Github user="facebook" repo="react" type="widget"></Github>
The tooltip is anchored in an inline link. The option type="link"
must be declared in the component.
<Github user="hackbit" type="link">Hover Here</Github>
<Github user="vandreleal" repo="vandreleal.github.io" type="link">Hover Here</Github>
Name | Type | Default | Description |
---|---|---|---|
linkText | string | "Github" | Link text |
The tooltip is anchored in a button. The option type="button"
must be declared in the component.
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 |
<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>
React Social Github is available on GitHub for downloading, forking, or contributing.