React Skillbars

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

Live Demo

Try the interactive demo here

Installation

npm i react-skillbars

Table of Contents

• Setup
• Properties
• Development
  • Tests
  • Build
  • Run

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