npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nano-panel

v0.2.2

Published

<h1 align="center"> nano-panel </h1> <h4 align="center"> Configurable debug overlay for websites </h4>

Downloads

9

Readme

:sparkles: Features

nano-panel is used to render information when debugging a website. Inject it into the DOM and it renders on top of your other content.

  • Uses React

  • Has simple built-in components

  • Easy to extend

  • Can be minimized


:newspaper: API

You need to install react and react-dom if you don't already use these in your app.

First add a div to your index.html:

<div id="debug-panel"></div>

Then render the Panel component with react-dom:

import { createRoot } from 'react-dom/client'
import { Panel, NumericValue } from 'nano-panel'

const root = createRoot(document.getElementById('debug-panel'))

root.render(
  <Panel>
    <NumericValue
      label={'A number'}
      getValue={() => 42}
    />
  </Panel>,
)

:jigsaw: Components

NumericValue

Renders a number with a label

Props:

label

type: string

getValue

type: () => number

This function is called once every second. Needs to return the data to display in the panel.

warnAt (optional)

type: object

Fields:

value

type: number

If the value returned from getValue is above this value, the text will be red.

when

type: "above" (default) or "below"

If below, will warn when value goes under that number.

<NumericValue
  label={'A number'}
  getValue={() => 1}
  warnAt={{ value: 2, when: 'above' }}
/>

StringValue

Renders a string with a label

Props:

label

type: string

getValue

type: () => string

This function is called once every second. Needs to return the data to display in the panel.

<StringValue
  label={'A string'}
  getValue={() => 'abc'}
/>

Button

Props:

label

type: string

onClick

type: () => void

<Button
  label={'Click me'}
  onClick={() => {
    console.log('Clicked')
  }}
/>

If you want Buttons to appear on the same row, wrap them in a row component:

<Row>
  <Button
    label={'Click me'}
    onClick={() => {}}
  />
  <Button
    label={'Click me'}
    onClick={() => {}}
  />
</Row>

Divider

A horizontal line to divide sections in the panel

<Divider />

Checkbox

<Checkbox
  label={'Is checked'}
  onClick={(checked) => {
    setIsChecked(checked)
  }}
  checked={isChecked}
/>

Snackbar

<Snackbar
  isOpen={showSnackbar}
  onClose={() => {
    setShowSnackbar(false)
  }}
  value={'This is a Snackbar'}
/>

Dropdown

<Dropdown
  label='Pick a value'
  description='This text describes the Dropdown'
  items={[
    { label: 'Label 1', value: '1' },
    { label: 'Label 2', value: '2' },
  ]}
  value={dropDownValue}
  onChange={(value) => {
    setDropdownValue(value)
  }}
/>

:package: Install

npm install nano-panel

Requirements

  • React 18

Guide

Since nano-panel is intended for debugging only, you don't want to initialize the code to run nano-panel in production.

Put the code in a module and conditionally initialize it if the app runs in development mode:

if (import.meta.env.MODE === 'development') {
  initDebugPanel()
}