Github Stars Button

This is a Github Stars Web Component for Frontend Projects.

Look at the console to see the triggered event

Downloads

Statistics of this lib on NPM.

Total	Weekly	Monthly	Yearly

How to install?

CDN

Unpkg JS

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

To install

YARN

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

How to use?

<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>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Web Components

JS Libraries