NPM Maintainer

> Statistics for a NPM user. See the demo here

A web component which shows various statistics for a user in the NPM database.

Visitor stats

!GitHub stars
!GitHub forks
!GitHub watchers
!GitHub followers

Code stats

!GitHub code size in bytes
!GitHub repo size
!GitHub language count
!GitHub top language
!GitHub last commit

Install

``sh
npm i npm-maintainer

#or

yarn add npm-maintainer
`

Usage

`js
// In your JS entrypoint
import 'npm-maintainer';
`

`html


user="scriptex"
error="An unknown error occurred. Please try again later."
loading="Loading data from NPM..."
>
`

Attributes

| Name | Type | Required | Default | Description |
| --------- | -------- | -------- | --------------------- | ---------------------------------- |
| user | string | true | '' | The user name from NPM |
| error | string | false | 'Error loading data.' | Message shown when an error occurs |
| loading | string | false | 'Loading data...' | Message shown when loading data |

Styling

The npm-maintainer Web Component utilizes the ::part() pseudo-element. In order to add custom styles, you should use the corresponding parts of the components:

- error - The element which shows the error message
- loading - The element which shows the loading message
- content - The element which shows the data table
- table - The <table> itself
- thead - The <thead> element
- thead-row - The <tr> inside the <thead> element
- tbody - The <tbody> element
- tbody-row - The <tr> inside the <tbody> element
- th - the <th> elements
- td - the <td> elements

Here is an example:

`css
npm-maintainer {
display: block;
}

npm-maintainer::part(error),
npm-maintainer::part(loading) {
text-align: center;
min-height: 75vh;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}

npm-maintainer::part(error) {
color: red;
}

npm-maintainer::part(table) {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}

npm-maintainer::part(th),
npm-maintainer::part(td) {
padding: 0.25rem;
border: 1px solid;
}

npm-maintainer::part(link) {
color: inherit;
text-decoration: underline;
}

npm-maintainer::part(link):hover {
text-decoration: none;
}
``

LICENSE

MIT

src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg"
height="20"
alt=""
/>

 

src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg"
height="20"
alt=""
/>

 

src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg"
height="20"
alt=""
/>

 

src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg"
height="20"
alt=""
/>

 

src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg"
height="20"
alt=""
/>

 

src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg"
height="20"
alt=""
/>

 



 

src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg"
height="20"
alt=""
/>

 

src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg"
height="20"
alt=""
/>

 

src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg"
width="20"
alt=""
/>

 

src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg"
height="20"
alt=""
/>

 

src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg"
height="20"
alt=""
/>

---

Support and sponsor my work:




href="https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A&url=https%3A%2F%2Fgithub.com%2Fscriptex&via=scriptexbg&hashtags=software%2Cgithub%2Ccode%2Cawesome"
title="Tweet"
>






src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json"
/>


src="https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon&color=e64413"
/>







href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json"
title="Donate Bitcoin"
>
src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json"
/>

href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json"
title="Donate Etherium"
>
src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json"
/>

href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json"
title="Donate Shiba Inu"
>
src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json"
/>