main 🧊 add default window for scrolls

Author: debabin

packages/core/package.json

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

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

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { getElement, isTarget } from '@/utils/helpers';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 import { useRefState } from '../useRefState/useRefState';
 /**
  * @name useScrollIntoView
@@ -40,7 +41,7 @@ export const useScrollIntoView = (...params) => {
     immediately = true
   } = options ?? {};
   const elementRef = useRef(null);
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!immediately) return;
     if (!target && !internalRef.state) return;
     const element = (target ? getElement(target) : internalRef.current) ?? window;

packages/core/src/hooks/useScrollIntoView/useScrollIntoView.ts

@@ -1,11 +1,12 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 
 import type { HookTarget } from '@/utils/helpers';
 
 import { getElement, isTarget } from '@/utils/helpers';
 
 import type { StateRef } from '../useRefState/useRefState';
 
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 import { useRefState } from '../useRefState/useRefState';
 
 /** The scroll into view options type */
@@ -74,7 +75,7 @@ export const useScrollIntoView = ((...params: any[]) => {
   } = options ?? {};
   const elementRef = useRef<Element>(null);
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!immediately) return;
     if (!target && !internalRef.state) return;
 

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

@@ -1,7 +1,11 @@
 import { useScrollTo } from '@siberiacancode/reactuse';
 
 const Demo = () => {
-  const scrollTo = useScrollTo<HTMLDivElement>({ x: 0, y: 260 });
+  const scrollTo = useScrollTo<HTMLDivElement>({
+    x: 0,
+    y: 260,
+    behavior: 'smooth'
+  });
 
   return (
     <div>