Add "onControlFinished" prop (resolves #2)

docs/api.tsx

@@ -89,6 +89,14 @@ export const ApiDocs: React.FunctionComponent = () => {
       },
       description: ""
     },
+    {
+      name: "onControlFinished",
+      required: false,
+      default: "",
+      type: "( ) => void",
+      description:
+        "Called when the user is done controlling (i.e. mouseUp / mouseLeave)"
+    },
     {
       name: "handle1",
       required: false,

docs/index.tsx

@@ -6,6 +6,7 @@ import { prism as syntaxStyle } from "react-syntax-highlighter/dist/esm/styles/p
 import { CircularSlider, CircularSliderWithChildren } from "../src";
 
 import { ApiDocs } from "./api";
+import { OnControlFinishedExample } from "./onControlFinished";
 
 class Main extends React.Component {
   render() {
@@ -27,6 +28,12 @@ class Main extends React.Component {
             opts={{ startAngle: 120, endAngle: 300 }}
           />
         </div>
+        <h3>Take action when user is done:</h3>
+        You can use the "onControlFinished" prop to pass a function that will be
+        called when the user finishes their control (i.e. onMouseUp or
+        onMouseLeave). You could use this callback, for example, to write the
+        final value of the control to a database.
+        <OnControlFinishedExample />
       </div>
     );
   }
@@ -76,6 +83,8 @@ const MyApp = () => {
         onChange: v => setValue2(v)
       }}
       arcColor="#690"
+      startAngle={40}
+      endAngle={320}
     />
   );
 };

docs/onControlFinished.tsx

@@ -0,0 +1,62 @@
+import { default as React, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { prism as syntaxStyle } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+import { CircularSlider, CircularSliderWithChildren } from "../src";
+
+import { ApiDocs } from "./api";
+
+export const OnControlFinishedExample: React.FunctionComponent = () => {
+  const MyApp: React.FunctionComponent = () => {
+    const [value1, setValue1] = useState(20);
+    const [endingValue, setEndingValue] = useState();
+
+    return (
+      <div>
+        <CircularSlider
+          handle1={{
+            value: value1,
+            onChange: v => setValue1(v)
+          }}
+          onControlFinished={() => setEndingValue(value1)}
+          arcColor="#690"
+        />
+        Current value: {value1}
+        <br />
+        Result of last control: {endingValue}
+      </div>
+    );
+  };
+  return (
+    <div style={{ display: "flex", flexWrap: "wrap" }}>
+      <div style={{ width: 200, flexShrink: 0 }}>
+        <MyApp />
+      </div>
+      <SyntaxHighlighter language="tsx" style={syntaxStyle}>
+        {`  import CircularSlider from 'react-circular-slider-svg';
+
+  const MyApp: React.FunctionComponent = () => {
+    const [value1, setValue1] = useState(20);
+    const [endingValue, setEndingValue] = useState();
+
+    return (
+      <div>
+        <CircularSlider
+          handle1={{
+            value: value1,
+            onChange: v => setValue1(v)
+          }}
+          onControlFinished={() => setEndingValue(value1)}
+          arcColor="#690"
+        />
+        Current value: {value1}
+        <br />
+        Result of last control: {endingValue}
+      </div>
+    );
+  };
+`}
+      </SyntaxHighlighter>
+    </div>
+  );
+};

src/index.tsx

@@ -24,6 +24,7 @@ type Props = {
     value: number;
     onChange: (value: number) => void;
   };
+  onControlFinished?: () => void;
   disabled?: boolean;
   arcColor: string;
   arcBackgroundColor: string;
@@ -81,6 +82,9 @@ export class CircularSlider extends React.Component<Props> {
       svgRef.removeEventListener("mouseleave", this.removeMouseListeners);
       svgRef.removeEventListener("mouseup", this.removeMouseListeners);
     }
+    if (this.props.onControlFinished) {
+      this.props.onControlFinished();
+    }
   };
 
   processSelection = (ev: React.MouseEvent<SVGSVGElement> | MouseEvent) => {

webpack.config.js

@@ -12,13 +12,17 @@ module.exports = {
     rules: [
       {
         test: /\.tsx?$/,
-        loader: "ts-loader"
+        loader: "ts-loader",
+        options: {
+          compilerOptions: {
+            declaration: false
+          }
+        }
       }
     ]
   },
   resolve: {
     extensions: [".ts", ".tsx", ".js"]
   },
-  devServer: {
-  }
+  devServer: {}
 };