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:

Go back

Send me your message