Github Build Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics

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


npm i npm-maintainer


yarn add npm-maintainer


// In your JS entrypoint
import 'npm-maintainer';
<!-- In your HTML file -->

	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 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(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(td) {
	padding: 0.25rem;
	border: 1px solid;

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

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



Connect with me:


Support and sponsor my work:

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • E.ON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image
  • Three11 brand image
  • dmarcian brand image
  • htmlBurger brand image
  • htmlBoutique brand image
  • 2create brand image