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

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:

                     

---

Support and sponsor my work: