react-neon-progressbar

react-neon-progressbar is simple progress component with neon look. Good for cyber ;)

See Demo at CodeSandbox

Installation

Use the package manager npm to install .

npm install react-neon-progressbar 

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { NeonProgressBar } from '../NeonProgressBar';

let intervalId: any = undefined;
function Demo() {
	const [value, setValue] = React.useState(0);
	React.useEffect(() => {
    if (intervalId) {
      clearInterval(intervalId);
    }
    intervalId = setInterval(() => {
      if (value < 100) {
        setValue(value + 1);
      } else {
        clearInterval(intervalId);
      }
    }, 80)
    return () => clearInterval(intervalId);
	},[value]);
  return (
	<div style={{ width: '600px', height: '600px' }} className="App">
    <NeonProgressBar value={value} width={300} />
	</div>
  );
}

ReactDOM.render(
  <Demo />,
  document.getElementById('root'),
);

props| default value| info --- | --- | --- width | 300 | The width of the progress bar Value | 0 | Fill percentage of the progress bar

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT