React SVG Example

react-svg-example-1.jsx

import {
  Button,
  Col,
  Row,
  Container,
  Form,
} from "react-bootstrap";
import { useState } from "react";

function App() {
  const [width, setWidth] = useState(7);
  const [cy, setCy] = useState(0);
  const [cx, setCx] = useState(0);
  const [dasharray, setDashArray] = useState(10);
  const [radius, setRadius] = useState(90);

  return (
    <Container>
      <Row>
        <Col>
          <svg width={900} height="{900}" viewBox="-100 -100 900 600" className="show">
            <circle
              cx={cx}
              cy={cy}
              r={radius}
              fill="transparent"
              stroke="#000000"
              strokeWidth={width}
              strokeDasharray={dasharray}
            />
          </svg>
        </Col>
        
        <Col xs={3}>
          <Row>
            <Form.Label>Width ({width})</Form.Label>
            <Form.Range min={1} max={24} value={width} onChange={(e) => {setWidth(e.target.value)}}/>
          </Row>
          <Row>
            <Form.Label>Y ({cy})</Form.Label>
            <Form.Range min={0} max={600} value={cy} onChange={(e) => {setCy(e.target.value)}}/>
          </Row>
          <Row>
            <Form.Label>X ({cx})</Form.Label>
            <Form.Range min={0} max={900} value={cx} onChange={(e) => {setCx(e.target.value)}}/>
          </Row>
          <Row>
            <Form.Label>dasharray ({dasharray})</Form.Label>
            <Form.Range min={0} max={50} value={dasharray} onChange={(e) => {setDashArray(e.target.value)}}/>
          </Row>
          <Row>
            <Form.Label>radius ({radius})</Form.Label>
            <Form.Range min={0} max={360} value={radius} onChange={(e) => {setRadius(e.target.value)}}/>
          </Row>
        </Col>
      </Row>
    </Container>
  );
}

export default App;