:octocat: Unofficial github:buttons.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
dependabot[bot] bbb4a3f92f Bump @babel/node from 7.18.5 to 7.18.6 2 days ago
.github Bump actions/checkout from 2 to 3 4 months ago
dist Update dependencies 6 months ago
src Fix high contrast scheme 7 months ago
test Do not show count for sponsors buttons 1 year ago
.eslintignore Update dependencies 5 months ago
.eslintrc.json Update dependencies 5 months ago
.gitignore Use rollupjs and istanbuljs 5 years ago
.npmignore Update .npmignore 3 years ago
LICENSE Update dependencies 6 months ago
README.md Update coveralls badge 1 year ago
karma.conf.js Increase mocha timeout to reduce flakyness in CI 9 months ago
package-lock.json Bump @babel/node from 7.18.5 to 7.18.6 2 days ago
package.json Bump sinon from 13.0.2 to 14.0.0 2 months ago
rollup.config.js Update dependencies 5 months ago

README.md

github-buttons

build Coverage Status npm

Usage

Use as a Snippet

Get started quickly with github:button configurator.

Use as a Component

Use as a Module

import { render } from 'github-buttons'

// export function render(options: object, callback: (el: HTMLElement) => void): void;
render(options, function (el) {
  document.body.appendChild(el) 
})

// export function render(anchor: HTMLAnchorElement, callback: (el: HTMLElement) => void): void;
render(anchor, function (el) {
  anchor.parentNode.replaceChild(el, anchor)
})

Options

  • For snippet usage, an option is an attribute on <a> element.
  • For component usage, an option is a prop on component.
  • For module usage, an option is a property on options object.
href
  • Type: string
  • Default: '#'

Assign href attribute (GitHub link) for button.

title
  • Type: string
  • Default: undefined

Assign title attribute for button.

data-icon
  • Type: string
  • Default: 'octicon-mark-github'

Set icon on button. A subset of Octicons is bundled.

data-color-scheme
  • Type: string
  • Default: undefined

Define a mapping of system color scheme to widget color scheme in css-like syntax.

This is an opt-in feature since version >=2.3.0. It means if data-color-scheme is undefined, it would still behave like version <2.3.0, where light color scheme is used under all conditions.

Once data-color-scheme is set to a string, it will inherit the default mapping: no-preference: light; light: light; dark: dark;.

  • no-preference: light; means when system has no preference on color scheme, light color scheme will be used.
  • light: light; means when system prefers light color scheme, light color scheme will be used.
  • dark: dark; means when system prefers dark color scheme, dark color scheme will be used.

User declarations would override the default. For example:

  • To enable color scheme using default, set data-color-scheme="".
  • To use dark color scheme when system has no preference, set data-color-scheme="no-preference: dark;".
  • To force light color scheme everywhere, set data-color-scheme="dark: light;".
  • To force dark color scheme everywhere, set data-color-scheme="no-preference: dark; light: dark;".

A single word can be used to force the color scheme everywhere since version >=2.11.0. For example:

  • To force light color scheme everywhere, set data-color-scheme="light".
  • To force dark color scheme everywhere, set data-color-scheme="dark".
data-size
  • Type: string
  • Default: undefined

Set button size. Possible values are undefined and 'large'.

data-show-count
  • Type: boolean
  • Default: false

Show a dynamic count based on button type (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)
data-text
  • Type: string
  • Default: undefined

Set button text. When button is generated from <a> element and data-text is undefined, the button text will be anchor's textContent.

aria-label
  • Type: string
  • Default: undefined

Set aira-label for button.


See also


License

See LICENSE.