archive-gh-me/react-use
1
0
Fork 0
mirror of https://github.com/streamich/react-use.git synced 2026-01-18 14:06:52 +00:00
Code Issues Projects Releases Wiki Activity

feat: 🎸 onScrubStop provide value where scrub stopped

Browse Source
This commit is contained in:
streamich 2020-04-24 18:36:32 +02:00
parent 113aa58130
commit 138b43cd1a
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/useSlider.ts
View File

@ -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();

6
stories/useSlider.story.tsx
View File

@ -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>