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
- import css
@import "~@feizheng/react-svg-circle/dist/style.scss";
// customize your styles:
$react-svg-circle-options: ()
- 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
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.