@vlalg-nimbus/github-stars-button NPM

github-stars-button

This is a Github Stars Web Component for Frontend Projects.

Installation

CDN

  https://unpkg.com/@vlalg-nimbus/github-stars-button/dist/github-stars-button.min.umd.js

To install

npm install @vlalg-nimbus/github-stars-button

# or

yarn add @vlalg-nimbus/github-stars-button

Usage

<head>
  <script type="module" src="https://unpkg.com/@vlalg-nimbus/github-stars-button/dist/github-stars-button.min.umd.js"></script>
</head>
<body>
  <github-stars-button
    data-repo-owner="repo owner"
    data-repo-name="repo name"
    data-show-count="true"
    data-go-repo="true"
  >
  </github-stars-button>

  <script>
    const githubStarsButton = document.querySelector('github-stars-button')

    githubStarsButton.addEventListener('webcomp-clicked', function(event) {
      const repoOwner = this.dataset.repoOwner
      const repoName = this.dataset.repoName
      const showCount = this.dataset.showCount

      console.log('Here', repoOwner, repoName, showCount)
      console.log('Custom event triggered:', event.detail.message)
    })
  </script>
</body>