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

react-bars

v0.1.2

Published

bars react component

Downloads

18

Readme

Build Status

react-bars

React Component to draw simple "skill bar" - style bar-graphs

screenshot

This component was developed after needing to graphically display skill levels for various technologies on my resume.

I thought this may be useful to other devs out there, so I turned it into a reusable component for React

Of course, It doesn't need to be used just for "skill bars" - it could fulfil many simple bar graph requirements.

There are two components, in a simple Heirarchy:

  • Bars draws an entire Bar graph consisting of a number of Bar components corresponding to each item in an array of iput data

  • Bar draws a single Bar component

Each Bar inherits properties from the parent Bars component, but properties can be overridden for each individual Bar component as required.

(for example, in the screenshot and sample code below, the 'HTML' bar is colored red)

Please refer to the API documentation for details:

API documentation: ./api.md

sample usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';	
import Bars from 'react-bars';

import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      testData: [
        {label:'Javascript', value:85},
        {label:'C++', value: 82},
        {label:'React', value:80},
        {label:'Node.js', value:75},
        {label:'HTML5', value:72, barColor:'red'},
        {label:'CSS', value:68},
        {label:'JQuery', value:65},
        {label:'Bootstrap', value:60},
        {label:'Python', value:50},
        {label:'Angular.js', value:45},
      ]
    };
  }

  render() {
    return (
      <div className="demo">
        <Bars data={this.state.testData} makeUppercase={true}/>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

styling

the styling for the Bars is defined in an internal stylesheet called bar.css

You can override the classes defined in bar.css to meet your own needs:

.bar-label {
    color: white;
    font: 15px 'opensans-bold', sans-serif;
    letter-spacing: 2px;
    font-weight: bold;
    position: relative;
    top: 10px;
    left: 10px;
}

.bar-suffix {
  display: inline-block;
    color: black;
    font: 15px 'opensans-bold', sans-serif;
    letter-spacing: 2px;
    font-weight: bold;
    position: relative;
    top: 10px;
    left: 10px;
}

.bar-contain {
    width: 90%;
    padding: 0;
    display: inline-block; 
    border-radius: 3px;
}

.bar-expand {
    display: inline-block;
    border-radius: 3px 0 0 3px;
}

the classes are used as follows:

bar-label : the labels inside the bars

bar-suffix: the numerical value AND suffix following each bar

bar-contain: the surrounding container for each bar

bar-expand: the value part of the bar

build commands:

dev: npm run dev - runs demo host app to facilitate development

dist: npm run build - runs minified build

lint: npm run lint - runs ESLint

generate API documentation: npm run generate-docs

testing: npm test

to-do:

  • [X] ~~optional display of numerical value~~

  • [ ] event callbacks (click, hover etc)

  • [ ] change orientation (vertical ? etc)

  • [X] ~~document / define styling~~

  • [ ] hover colors etc

Acknowledgements / credits:

This project was inspired by the following works:

  1. ceevee template (released under the Creative Commons Attribution 3.0 License) by Styleshout