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

@billes/components

v3.0.0

Published

Components in React

Downloads

68

Readme

Billes Components

Install

yarn add @billes/components

Action

 <Action icon={ <ReactComponent /> } label={ 'Some label' } action={() => { console.log('hello world')}}>
{
    action = null // fn to be called on click,
    disabled = false // unable to use action and hovering is off
    icon = null, // An object, component or a string that would be used as img-src
    link = null, // Shows as link in statusfield, converts from button to a
    label // Label to be displayed
    style = {} // Custom styling of action. caveats: background must be hex
    flip = false // puts the icon on the right side with label still aligned to the left 
}

Icon object passed to action

icon: {
    component: <Component />,
    width: 40 // integer for setting a custom width. Height is locked to 24px or less depending on main style
}

Dropdown

Dropdown is basically an elaborate collection of <Action />. The dropdown button itself is converted to <Action /> with a custom action that displays items. The items will convert to a list of <Action>. The dropdown will expand left or up if it will render outside of viewport

NOTE: items array does not take the <Action /> (the react-component) as a valid item

 <Dropdown icon={ <ReactComponent /> } name={ 'Label' } items={ items } />
disabled = false // unable to use action and hovering is off
icon // A component or a string that would be used as img-src
items: [
  {
    action = null // fn to be called on click,
    disabled = false // unable to use action and hovering is off
    icon = null, // A component or a string that would be used as img-src
    link = null, // Shows as link in statusfield, converts from button to a
    label // Label to be displayed
    style = {} // Custom styling of action. caveats: background must be hex
    flip = false // puts the icon on the right side with label still aligned to the left 
  }
],
label // Label to be displayed
style = {} // Custom styling of action
flip = false // puts the icon on the right side with label still aligned to the left 
wrapper = false // It can expand up or left based on a wrapper as well as a window. Wants an id of an element (no pound/hash sign)
chevron = false // if you want to display chevron or not