Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

github-buttons

Package Overview
Dependencies
Maintainers
1
Versions
74
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

github-buttons

GitHub Buttons

  • 2.8.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
26K
decreased by-21.94%
Maintainers
1
Weekly downloads
 
Created
Source

github-buttons

CircleCI Codecov 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 in 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;".
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.

Keywords

FAQs

Package last updated on 03 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc