main 🧊 v0.3.37

Author: debabin

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siberiacancode/reactuse",
-  "version": "0.3.35",
+  "version": "0.3.37",
   "description": "The ultimate collection of react hooks",
   "author": {
     "name": "SIBERIA CAN CODE 🧊",

packages/core/src/bundle/hooks/useMask/useMask.js

@@ -358,6 +358,7 @@ export const generatePattern = (mode, options) => {
  *
  * @param {UseMaskOptions} options The hook options
  * @param {boolean} [options.autoClear=false] Clear value on blur when mask is incomplete
+ * @param {string} [options.initialValue=""] Initial raw value
  * @param {string | Array<string | RegExp>} options.mask Mask pattern string or array of literals and RegExp tokens
  * @param {(value: string) => Partial<Pick<UseMaskOptions, 'mask' | 'showMask' | 'slot' | 'tokens'>>} [options.modify] Called before masking and can return dynamic mask option overrides
  * @param {UseMaskShow} [options.showMask="focus"] Defines when placeholder slots are displayed
@@ -375,18 +376,32 @@ export const generatePattern = (mode, options) => {
 export const useMask = (options) => {
   const optionsRef = useRef(options);
   optionsRef.current = options;
+  const initialRawValue = options.initialValue ?? '';
+  const initialResolvedOptions = getResolvedOptions(options, initialRawValue);
+  const initialMaskedValue = applyMaskToRaw(
+    initialRawValue,
+    initialResolvedOptions.slots,
+    initialResolvedOptions.transform
+  );
+  const initialDisplayValue = buildDisplayValue(
+    initialMaskedValue,
+    initialResolvedOptions.slots,
+    initialResolvedOptions.slot,
+    shouldShowMask(initialResolvedOptions.showMask, false, initialMaskedValue)
+  );
+  const initialFilled = checkComplete(initialMaskedValue, initialResolvedOptions.slots);
   const inputRef = useRef(null);
   const valueRef = useRef({
-    displayValue: '',
-    filled: false,
-    maskedValue: '',
-    rawValue: '',
-    value: ''
+    displayValue: initialDisplayValue,
+    filled: initialFilled,
+    maskedValue: initialMaskedValue,
+    rawValue: initialRawValue,
+    value: initialDisplayValue
   });
-  const processedRef = useRef('');
-  const displayValueRef = useRef('');
-  const rawValueRef = useRef('');
-  const wasCompleteRef = useRef(false);
+  const processedRef = useRef(initialMaskedValue);
+  const displayValueRef = useRef(initialDisplayValue);
+  const rawValueRef = useRef(initialRawValue);
+  const wasCompleteRef = useRef(initialFilled);
   const isFocusedRef = useRef(false);
   const watchingRef = useRef(false);
   const undoStackRef = useRef([]);
@@ -506,11 +521,20 @@ export const useMask = (options) => {
     const nextMaskedValue = applyMaskToRaw(state.rawValue, slots, transform);
     updateValue(nextMaskedValue, state.selectionStart);
   };
-  const set = (value) => {
+  const setValue = (value) => {
     const { slots, transform } = getResolvedOptions(optionsRef.current, value);
     const nextMaskedValue = applyMaskToRaw(value, slots, transform);
     updateValue(nextMaskedValue);
   };
+  const getValue = (type = 'raw') => {
+    if (type === 'display') {
+      return valueRef.current.displayValue;
+    }
+    if (type === 'masked') {
+      return valueRef.current.maskedValue;
+    }
+    return valueRef.current.rawValue;
+  };
   const clampCursorToProcessed = (element) => {
     const start = element.selectionStart ?? 0;
     const end = element.selectionEnd ?? 0;
@@ -534,14 +558,13 @@ export const useMask = (options) => {
       if (!node || node.value) {
         return;
       }
-      const { showMask, slots, slot } = getResolvedOptions(optionsRef.current, '');
-      if (!shouldShowMask(showMask, false, '')) {
-        return;
-      }
-      const displayValue = buildDisplayValue('', slots, slot, true);
-      node.value = displayValue;
-      displayValueRef.current = displayValue;
-      updateRefs({ displayValue });
+      node.value = displayValueRef.current;
+      updateRefs({
+        displayValue: displayValueRef.current,
+        filled: wasCompleteRef.current,
+        maskedValue: processedRef.current,
+        rawValue: rawValueRef.current
+      });
     },
     onChange: (event) => {
       const element = event.currentTarget;
@@ -816,42 +839,41 @@ export const useMask = (options) => {
   const reset = () => {
     const input = inputRef.current;
     const hookOptions = optionsRef.current;
-    processedRef.current = '';
-    displayValueRef.current = '';
-    rawValueRef.current = '';
+    const nextRawValue = hookOptions.initialValue ?? '';
+    const { showMask, slots, slot, transform } = getResolvedOptions(hookOptions, nextRawValue);
+    const nextMaskedValue = applyMaskToRaw(nextRawValue, slots, transform);
+    const nextDisplayValue = buildDisplayValue(
+      nextMaskedValue,
+      slots,
+      slot,
+      shouldShowMask(showMask, false, nextMaskedValue)
+    );
+    const complete = checkComplete(nextMaskedValue, slots);
+    processedRef.current = nextMaskedValue;
+    displayValueRef.current = nextDisplayValue;
+    rawValueRef.current = nextRawValue;
     undoStackRef.current = [];
     redoStackRef.current = [];
     updateRefs({
-      displayValue: '',
-      filled: false,
-      maskedValue: '',
-      rawValue: ''
+      displayValue: nextDisplayValue,
+      filled: complete,
+      maskedValue: nextMaskedValue,
+      rawValue: nextRawValue
     });
-    wasCompleteRef.current = false;
-    let nextDisplayValue = '';
+    wasCompleteRef.current = complete;
     if (input) {
-      const { showMask, slots, slot } = getResolvedOptions(hookOptions, '');
-      if (shouldShowMask(showMask, false, '')) {
-        nextDisplayValue = buildDisplayValue('', slots, slot, true);
-        displayValueRef.current = nextDisplayValue;
-        updateRefs({ displayValue: nextDisplayValue });
-      }
       input.value = nextDisplayValue;
     }
-    hookOptions.onChangeRaw?.('', nextDisplayValue);
+    hookOptions.onChangeRaw?.(nextRawValue, nextDisplayValue);
   };
   const watch = () => {
     watchingRef.current = true;
     return valueRef.current;
   };
   return {
+    getValue,
     register,
-    displayValue: valueRef.current.displayValue,
-    value: valueRef.current.value,
-    maskedValue: valueRef.current.maskedValue,
-    rawValue: valueRef.current.rawValue,
-    filled: valueRef.current.filled,
-    set,
+    setValue,
     reset,
     watch
   };

packages/core/src/bundle/hooks/useMediaControls/useMediaControls.js

@@ -64,9 +64,9 @@ export const useMediaControls = (...params) => {
   const [buffered, setBuffered] = useState([]);
   const [stalled, setStalled] = useState(false);
   const [ended, setEnded] = useState(false);
-  const [playbackRate, setPlaybackRateState] = useState(1);
-  const [muted, setMutedState] = useState(false);
-  const [volume, setVolumeState] = useState(1);
+  const [playbackRate, setPlaybackRate] = useState(1);
+  const [muted, setMuted] = useState(false);
+  const [volume, setVolume] = useState(1);
   useEffect(() => {
     const element = target ? isTarget.getElement(target) : internalRef.current;
     if (!element) return;
@@ -76,11 +76,10 @@ export const useMediaControls = (...params) => {
     if (options.media) element.setAttribute('media', options.media);
     setDuration(element.duration);
     setCurrentTime(element.currentTime);
-    setPlaying(false);
     setEnded(element.ended);
-    setMutedState(element.muted);
-    setVolumeState(element.volume);
-    setPlaybackRateState(element.playbackRate);
+    setMuted(element.muted);
+    setVolume(element.volume);
+    setPlaybackRate(element.playbackRate);
     const onPlaying = () => {
       setPlaying(true);
       setStalled(false);
@@ -97,10 +96,10 @@ export const useMediaControls = (...params) => {
     const onDurationChange = () => setDuration(element.duration);
     const onTimeUpdate = () => setCurrentTime(element.currentTime);
     const onVolumechange = () => {
-      setMutedState(element.muted);
-      setVolumeState(element.volume);
+      setMuted(element.muted);
+      setVolume(element.volume);
     };
-    const onRatechange = () => setPlaybackRateState(element.playbackRate);
+    const onRatechange = () => setPlaybackRate(element.playbackRate);
     const onProgress = () => setBuffered(timeRangeToArray(element.buffered));
     element.addEventListener('playing', onPlaying);
     element.addEventListener('pause', onPause);
@@ -114,6 +113,7 @@ export const useMediaControls = (...params) => {
     element.addEventListener('timeupdate', onTimeUpdate);
     element.addEventListener('volumechange', onVolumechange);
     element.addEventListener('ratechange', onRatechange);
+    if (playing) element.play();
     return () => {
       element.removeEventListener('playing', onPlaying);
       element.removeEventListener('pause', onPause);
@@ -128,7 +128,13 @@ export const useMediaControls = (...params) => {
       element.removeEventListener('volumechange', onVolumechange);
       element.removeEventListener('ratechange', onRatechange);
     };
-  }, [target && isTarget.getRawElement(target), internalRef.state]);
+  }, [
+    target && isTarget.getRawElement(target),
+    internalRef.state,
+    options.src,
+    options.type,
+    options.media
+  ]);
   const play = async () => {
     const element = elementRef.current;
     if (!element) return;

packages/core/src/hooks/useFul/useFul.demo.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
           check{' '}
           <a
             className='text-primary underline'
-            href='/new/hooks/useLess'
+            href='/new/functions/hooks/useLess'
             rel='noreferrer'
             target='_blank'
           >

packages/core/src/hooks/useLastChanged/useLastChanged.demo.tsx

@@ -6,7 +6,9 @@ const formatTime = (timestamp: number) => {
   const date = new Date(timestamp);
   const hours = String(date.getHours()).padStart(2, '0');
   const minutes = String(date.getMinutes()).padStart(2, '0');
-  return `${hours}:${minutes}`;
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return `${hours}:${minutes}:${seconds}`;
 };
 
 const Demo = () => {

packages/core/src/hooks/useLess/useLess.demo.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
           check{' '}
           <a
             className='text-primary underline'
-            href='/new/hooks/useFul'
+            href='/new/functions/hooks/useFul'
             rel='noreferrer'
             target='_blank'
           >

packages/core/src/hooks/useMask/useMask.demo.tsx

@@ -9,14 +9,14 @@ interface Country {
   name: string;
 }
 
-const COUNTRIES: Country[] = [
+const COUNTRIES = [
   { code: '7', name: 'Russia', flag: '🇷🇺', mask: '+9 (999) 999-99-99' },
   { code: '1', name: 'USA', flag: '🇺🇸', mask: '+9 (999) 999-9999' },
   { code: '44', name: 'UK', flag: '🇬🇧', mask: '+99 9999 999999' },
   { code: '77', name: 'Kazakhstan', flag: '🇰🇿', mask: '+99 (999) 999-99-99' },
   { code: '380', name: 'Ukraine', flag: '🇺🇦', mask: '+999 (99) 999-99-99' },
   { code: '998', name: 'Uzbekistan', flag: '🇺🇿', mask: '+999 (99) 999-99-99' }
-];
+] as const;
 
 const DEFAULT_MASK = '999999999999999';
 
@@ -29,23 +29,23 @@ const Demo = () => {
   const name = useField('');
   const cvv = useField('');
 
-  const phone = useMask({
+  const phoneMask = useMask({
     mask: DEFAULT_MASK,
     showMask: 'never',
-    slot: null,
     modify: (rawValue) => ({ mask: detectCountry(rawValue)?.mask ?? DEFAULT_MASK }),
-    beforeMaskedStateChange: ({ nextState }) => ({
+    beforeMaskedChange: ({ nextState }) => ({
       ...nextState,
       selection: { start: nextState.value.length, end: nextState.value.length }
     })
   });
 
+  const phone = phoneMask.watch();
+
   const cardNumber = useMask({
     mask: '9999 9999 9999 9999',
-    showMask: 'never',
-    slot: null
+    showMask: 'never'
   });
-  const expiry = useMask({ mask: '99/99', showMask: 'never', slot: null });
+  const expiry = useMask({ mask: '99/99', showMask: 'never' });
 
   const country = detectCountry(phone.rawValue);
 
@@ -82,7 +82,7 @@ const Demo = () => {
             )}
             inputMode='tel'
             placeholder='Start typing with country code'
-            {...phone.register()}
+            {...phoneMask.register()}
           />
         </div>
         {country && <span className='text-muted-foreground px-1 text-[10px]'>{country.name}</span>}