feat: 🎸 onScrubStop provide value where scrub stopped

streamich · Apr 24, 2020 · 138b43c · 138b43c · trevorblades · Apr 25, 2020
1 parent 113aa58
commit 138b43c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/useSlider.ts b/src/useSlider.ts
@@ -13,7 +13,7 @@ export interface State {
 export interface Options {
   onScrub: (value: number) => void;
   onScrubStart: () => void;
-  onScrubStop: () => void;
+  onScrubStop: (value: number) => void;
   reverse: boolean;
   styles: boolean | CSSProperties;
   vertical?: boolean;
@@ -24,12 +24,15 @@ const noop = () => {};
 const useSlider = (ref: RefObject<HTMLElement>, options: Partial<Options> = {}): State => {
   const isMounted = useMountedState();
   const isSliding = useRef(false);
+  const valueRef = useRef(0);
   const frame = useRef(0);
   const [state, setState] = useSetState<State>({
     isSliding: false,
     value: 0,
   });
 
+  valueRef.current = state.value;
+
   useEffect(() => {
     if (isClient) {
       const styles = options.styles === undefined ? true : options.styles;
@@ -50,7 +53,7 @@ const useSlider = (ref: RefObject<HTMLElement>, options: Partial<Options> = {}):
 
       const stopScrubbing = () => {
         if (isSliding.current && isMounted()) {
-          (options.onScrubStop || noop)();
+          (options.onScrubStop || noop)(valueRef.current);
           isSliding.current = false;
           setState({ isSliding: false });
           unbindEvents();

diff --git a/stories/useSlider.story.tsx b/stories/useSlider.story.tsx
@@ -5,7 +5,11 @@ import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
   const ref = React.useRef(null);
-  const state = useSlider(ref);
+  const state = useSlider(ref, {
+    onScrubStop: (value) => {
+      console.log('onScrubStop', value);
+    },
+  });
 
   return (
     <div>