Height

Default Unit

You can provide a height prop with a number and it will render it based on numberpx.

import SkillBar from 'react-skillbars';

const skills = [
  { type: 'Java', level: 100 },
  { type: 'React', level: 85 },
  { type: 'Javascript', level: 75 },
  { type: 'Spring', level: 50 },
  { type: 'Docker', level: 25 },
  { type: 'HTML', level: 20 },
  { type: 'NoSQL', level: 0 }
];
<SkillBar skills={skills} height={15}/>

Java

100%

React

85%

Javascript

75%

Spring

50%

Docker

25%

HTML

20%

NoSQL

Custom Unit

You can also provide a string with the value and unit to use that instead.

import SkillBar from 'react-skillbars';

const skills = [
  { type: 'Java', level: 100 },
  { type: 'React', level: 85 },
  { type: 'Javascript', level: 75 },
  { type: 'Spring', level: 50 },
  { type: 'Docker', level: 25 },
  { type: 'HTML', level: 20 },
  { type: 'NoSQL', level: 0 }
];
<SkillBar skills={skills} height={'5vh'}/>