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 ="facebook" ="react"></Github> /* same as */ <Github ="facebook" ="react" ="widget"></Github>
Link
The tooltip is anchored in an inline link. The option type="link"
must be declared in the component.
Example
<Github ="hackbit" ="link">Hover Here</Github> <Github ="vandreleal" ="vandreleal.github.io" ="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 ="facebook" ="tooltip" = = ="top-left" ="#3b5998" = =></Github> <Github ="GustavoKatel" ="tooltip" = = ="bottom-left" ="#888" = =></Github>
Team
Open source
React Social Github is available on GitHub for downloading, forking, or contributing.