react-skills-bars v1.0.0-development
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
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
7 years ago