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
Code stats
Install
npm i npm-maintainer
#or
yarn add npm-maintainer
Usage
// In your JS entrypoint
import 'npm-maintainer';
<!-- In your HTML file -->
<npm-maintainer
user="scriptex"
error="An unknown error occurred. Please try again later."
loading="Loading data from NPM..."
></npm-maintainer>
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 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:
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
Connect with me: