A web component which shows various statistics for a user in the NPM database.
npm install 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.
!GitHub stars
!GitHub forks
!GitHub watchers
!GitHub followers
!GitHub code size in bytes
!GitHub repo size
!GitHub language count
!GitHub top language
!GitHub last commit
``sh
npm i npm-maintainer
#or
yarn add npm-maintainer
`
`js`
// In your JS entrypoint
import 'npm-maintainer';
`html
error="An unknown error occurred. Please try again later."
loading="Loading data from NPM..."
>
`
| 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 |
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 messageloading
- - The element which shows the loading messagecontent
- - The element which shows the data tabletable
- - The <table> itselfthead
- - The <thead> elementthead
- -row - The <tr> inside the <thead> elementtbody
- - The <tbody> elementtbody
- -row - The <tr> inside the <tbody> elementth
- - the <th> elementstd
- - 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;
}
``
MIT
---