Skip to content
Skill bars with full color customizations and responsive layout.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
flow-typed
public
scripts
src
.flowconfig
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json

README.md

React Skillbars

React NPM library containing skill bars with full color customizations and responsive layout.

version travis build codecov coverage Codacy Badge dependency status MIT License semantic-release Commitizen friendly stability-stable Greenkeeper code style

Live Demo

Try the interactive demo here

Installation

npm i react-skillbars

Table of Contents

Setup

import SkillBar from 'react-skillbars';
...
const skills = [
  {type: "Java", level: 85},
  {type: "Javascript", level: 75},
];
...
<SkillBar skills={skills}/>

Properties

skills - Required

Array of skills to be displayed. Each array entry is an object containing at minimum type and level where

type - name of skill
level - % of skill from 0-100

colors - Optional

Object of global coloring information for bar, title text & background. It accepts global colors or color codes such as

colors = {
  bar: 'red',
  title: {
    text: '#abc123',
    background: '#fff'
  }
}

hue range data combined

colors = {
  bar: '#fffaaa',
  title: {
    text: {
      hue: {
        minimum: 30,
        maximum: 150
      },
      saturation: 50,
      level: {
        minimum: 30,
        maximum: 90
      }
    },
    background: {
      hue: 20,
      saturation:50,
      level:30
    }
  }
}

animationDelay - Optional - defaults to 3000ms

Delay from mounting of component to when animation is triggered

offset - Optional - defaults to 25

Artificial tweaking of viewport for animation triggering. When component is completely contained by the artificial viewport animation is triggered. When element has a greater size than viewport size then animation triggers when element top is lower than middle of screen + offset and element bottom is higher than middle minus offset.

height - Optional

Specifies the height of each bar in the component. Accepts plain numbers which default to pixel units

<SkillBar skills={SKILLS} height={10}/>

strings with unit attached at end as

<SkillBar skills={SKILLS} height={'10vh'}/>

Development

In the project root run

npm i

Tests

You can run the test suite by typing

npm t

Build

Building the project demo page and npm module is done via

npm run build

Building individual parts is done via

npm run build:ghpage

and

npm run build:module

respectively.

Run

You can run the demo project which uses the skillbar by typing

npm start
You can’t perform that action at this time.