Boilerplate for creating React Npm packages with ES2015
This boilerplate is based on react-npm-boilerplate. And a react D3 component is added to the project.
How to use it
- Clone this repo
- Inside cloned repo run
npm install && rm -rf .git && git initand updatepackage.jsonwith your package name. - If you want to run tests:
npm testornpm run testonlyornpm run test-watch. You need to write tests in__tests__folder. You need at least Node 4 on your machine to run tests. - If you want to run linting:
npm testornpm run lint. Fix bugs:npm run lint-fix. You can adjust your.eslintrcconfig file. - If you want to run transpilation to ES5 in
distfolder:npm run prepublish(standard npm hook). - An react D3 arc progress component
./src/ArcProgress.jsis add to the project, and exported asArcProgress. You can use the Arc Progress chart by intalling thereact-npm-demo.
- Step 1: Install the
react-npm-demo
npm install react-npm-demo --save- Step 2: Import
AcrProgressin your project
import React, {Component} from 'react';
import {ArcProgress} from 'react-npm-demo';
class Demo extends Component {
constructor() {
super();
this.state = {
percentComplete: 0.3
};
this.togglePercent = this.togglePercent.bind(this);
}
render() {
return (
<div>
<div>My Demo</div>
<MyComponent />
<NextButton />
<div>
<a onClick={this.togglePercent}>Toggle Arc</a>
<ArcProgress
height={300}
width={300}
innerRadius={109}
outerRadius={110}
id="d3-arc"
backgroundColor="#e6e6e6"
foregroundColor="#00ff00"
percentComplete={this.state.percentComplete}
/>
</div>
</div>
);
}
togglePercent() {
const percentage = this.state.percentComplete === 0.3 ? 0.7 : 0.3;
this.setState({
percentComplete: percentage,
});
}
}
export default Demo;The result should be like the below.
