@feizheng/react-svg-circle

react-svg-circle

Svg circle for react.

installation

npm install -S @feizheng/react-svg-circle

update

npm update @feizheng/react-svg-circle

properties

Name	Type	Required	Default	Description
className	string	false	-	The extended className for component.
lineWidth	number	false	10	The circle line-width.
lineCap	enum	false	'inherit'	The circle line-cap.
value	number	false	0	Circle deg, default 0.
onChange	func	false	noop	The change handler.
svgProps	any	false	-	Any other svg props.
elementProps	any	false	-	Any other circle(main element) props.

usage

1. import css

@import "~@feizheng/react-svg-circle/dist/style.scss";

// customize your styles:
$react-svg-circle-options: ()

2. import js

import ReactSvgCircle from '@feizheng/react-svg-circle';
import ReactDOM from 'react-dom';
import React from 'react';
import './assets/style.scss';

class App extends React.Component {
  state = {
    value: 180
  };

  render() {
    const { value } = this.state;
    return (
      <div className="app-container">
        <h2 className="is-title">Drag me to change</h2>
        <div className="is-control">
          <input
            type="range"
            onChange={(e) => {
              const { value } = e.target;
              this.setState({ value: parseInt(value) });
            }}
            step="1"
            min="0"
            max="360"
            value={value}
            name=""
            id=""
          />
        </div>
        <div className="is-component">
          <ReactSvgCircle lineWidth={20} lineCap="inherit" value={value}>
            <text
              x="20"
              y="35"
              x="50%"
              y="50%"
              dominantBaseline="middle"
              textAnchor="middle">
              {value}%
            </text>
          </ReactSvgCircle>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

fix ios9 debug

• babel const error

  ["@babel/preset-env", {
    "targets": {
      "browsers": ["last 2 versions"],
    }
  }]

• babel rest(..args)

  "@babel/plugin-transform-parameters"

documentation

• https://afeiship.github.io/react-svg-circle/

resources

• https://codepen.io/depthdev/pen/bNyxzG
• https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-linecap
• https://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

license

Code released under the MIT license.