Get started quickly with github:button configurator.
The source code for the configurator is available at ntkme/github-buttons-app.
import { render } from 'github-buttons'
// export function render(anchor: HTMLAnchorElement, callback: (el: HTMLElement) => void): void;
render(anchor, function (el) {
anchor.parentNode.replaceChild(el, anchor)
})
// export function render(options: object, callback: (el: HTMLElement) => void): void;
render(options, function (el) {
document.body.appendChild(el)
})
- vue-github-button for Vue
- react-github-btn for React
These options are the same for all the use cases described above:
Attribute | Description |
---|---|
href |
GitHub link for the button. |
title |
title attribute for the button's rendered element. |
data-icon |
octicon-mark-github by default. A subset of Octicons is bundled. |
data-size |
None by default or large . |
data-show-count |
false by default or true . The dynamic count is generated based on detected button type. |
data-text |
Text displayed on the button. It defaults to the text content within the link. |
aria-label |
Aira label for the button link. |
Button type is detected from href
.
https://github.com/:user
(follow)https://github.com/:user/:repo
(star)https://github.com/:user/:repo/subscription
(watch)https://github.com/:user/:repo/fork
(fork)https://github.com/:user/:repo/issues
(issues)https://github.com/:user/:repo/issues/new
(issues)
Tailing slash, query string, and hash in the href
won't affect type detection.
https://github.com/:user/
(follow)https://github.com/:user?tab=repositories
(follow)https://github.com/:user/:repo#readme
(star)https://github.com/:user/:repo/#readme
(star)
git clone https://github.com/ntkme/github-buttons.git
cd github-buttons && npm install
npm run build
npm test
See LICENSE.