Package Exports

@jswork/react-svg-circle

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jswork/react-svg-circle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-svg-circle

Svg circle for react.

installation

npm install -S @jswork/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 "~@jswork/react-svg-circle/dist/style.css";

// or use sass
@import "~@jswork/react-svg-circle/dist/style.scss";

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

import js

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

class App extends React.Component {
  state = {
    value: 180
  };
  render() {
    const { value } = this.state;
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-svg-circle">
        <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>
      </ReactDemokit>
    );
  }
}

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

documentation

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

license

Code released under the MIT license.