A dependency-free, pure-css animated, resizable, customizable, skill bars panel React component.

• Links
• Installation
• Usage
• Developers
• Props API

• Documentation
• Quick demo
• Storybook playground
• NPM
• Github

npm i react-skills

import { SkillBars } from 'react-skills';

const skillsData= [
  {
    name: 'ReactJS',
    level: 100,
    color: 'blue',
  },
  {
    name: 'SomeOtherTech',
    level: 85,
    color: 'red',
  }
]

// ...

<SkillBars skills={skillsData} />

or you can use the SkillBar (singular) component this way:

import { SkillBar } from 'react-skills';

// ...

<SkillBar name="ReactJS" level={100} color="blue" />
<SkillBar name="SomeOtherTech" level={80} color="red" />

npm run start or yarn start

Runs the library in development mode. Open http://localhost:3000 to view it in the browser.

npm run test or yarn test

Runs the test watcher in an interactive mode.

npm run build or yarn build

Builds the library for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

npm run deploy or yarn deploy Builds the component then push it on NPM as new version. Builds the github page app for production to the demo folder. Creates a gh-page github branch and push the demo build on that branch.

Displays a animated skill bar

Group your Skillbars components together

_{This document was generated by the Create React Readme v1.0.2.}