1.1.3 • Published 3 years ago
@feizheng/react-svg-circle v1.1.3
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.