Replace useDelayedNavigate with useTransitionNavigate

README.md

@@ -17,13 +17,13 @@
   - [Meta](#meta)
 - [React Hooks](#react-hooks)
   - [useAxios](#useaxios)
-  - [useDelayedNavigate](#usedelayednavigate)
   - [useFetch](#usefetch)
   - [useMedia](#usemedia)
   - [useObjectState](#useobjectstate)
   - [usePersistedState](#usepersistedstate)
   - [usePersistedObjectState](#usepersistedobjectstate)
   - [useProgressiveImage](#useprogressiveimage)
+  - [useTransitionNavigate](#usetransitionnavigate)
 - [Utility Functions](#utility-functions)
   - [lazyPrefetch](#lazyprefetch)
     <br>
@@ -165,24 +165,6 @@ import { axios } from 'frontend-essentials'
 axios.defaults.withCredentials = true
 ```
 
-## useDelayedNavigate
-
-Delays React Router's navigation until the target component is rendered:
-
-```js
-const navigate = useDelayedNavigate()
-
-<NavLink
-    to='home'
-    onClick={event => {
-    event.preventDefault()
-    navigate('home')
-    }}
->
-    Home
-</NavLink>
-```
-
 ## useFetch
 
 Similar to useAxios but with native fetch's API:
@@ -279,6 +261,24 @@ const [src, blur] = useProgressiveImage(lowQualitySrc, highQualitySrc)
 return <img style={{ filter: blur ? 'blur(20px)' : 'none' }} src={src} />
 ```
 
+## useTransitionNavigate
+
+Delays React Router's navigation until the target page is rendered:
+
+```js
+const navigate = useTransitionNavigate()
+
+<NavLink
+    to='home'
+    onClick={event => {
+    event.preventDefault()
+    navigate('home')
+    }}
+>
+    Home
+</NavLink>
+```
+
 <br>
 
 # Utility Functions

src/hooks/useTransitionNavigate.ts

@@ -0,0 +1,11 @@
+import { useTransition } from 'react'
+import { useNavigate, To, NavigateOptions } from 'react-router-dom'
+
+const useTransitionNavigate = () => {
+  const [, startTransition] = useTransition()
+  const navigate = useNavigate()
+
+  return (to: To, options?: NavigateOptions) => startTransition(() => navigate(to, options))
+}
+
+export default useTransitionNavigate

src/index.ts

@@ -3,13 +3,13 @@ export { default as Media, MediaProps } from './components/Media'
 export { default as Meta, MetaProps } from './components/Meta'
 
 export { default as useAxios, axios, UseAxiosRequestConfig, UseAxiosResponse } from './hooks/useAxios'
-export { default as useDelayedNavigate } from './hooks/useDelayedNavigate'
 export { default as useFetch, UseFetchRequestConfig, UseFetchResponse } from './hooks/useFetch'
 export { default as useMedia, QueriesMap } from './hooks/useMedia'
 export { default as useObjectState } from './hooks/useObjectState'
 export { default as usePersistedObjectState } from './hooks/usePersistedObjectState'
 export { default as usePersistedState, PersistenceOptions } from './hooks/usePersistedState'
 export { default as useProgressiveImage } from './hooks/useProgressiveImage'
+export { default as useTransitionNavigate } from './hooks/useTransitionNavigate'
 
 export { default as camelCasedKeys } from './utils/camel-cased-keys'
 export { default as lazyPrefetch } from './utils/lazy-prefetch'