š„ Enhanced React Hooks
npm install @react-enhanced/hooksš„ Enhanced React Hooks
useApiAPI request hook based on fetch + Observable, supports advanced features like interceptor, lazy request, etc.
``ts`
const { data, loading, error, fetch } = useApi('path')
`tsfetch
const { data, loading, error, fetch } = useApi('path', {
method: ApiMethod.POST,
type: 'text',
query: {},
body: {},
// Other native options`
})
`tsfetch
// It won't trigger actively in lazy mode, and properties like data, loading, error are not available by default`
const { fetch } = useApi('path', {
lazy: true,
})
`tslazyResult
// Enable to make properties like data, loading, error available`
const { data, loading, error, fetch } = useApi('path', {
lazy: true,
lazyResult: true,
})
`tsfetchApi
// Use directly, no involvement in rendering`
const callApi = useCallback(() => fetchApi('path'), [])
Similar to useState + useMemo
`tsvalue
const value = useComputed({ a: 1 }, []) // 's reference will never change`
`tsuseMemo
const value = useComputed(() => ({ a: 1 }), []) // Basically equivalent to
Constant based on useState, will never change
Enhanced useEffect, support subscribe and unsubscribe Observable automatically, support nested unsubscribe
`ts`
useEnhancedEffect(() =>
fetchApi('path1').pipe(switchMap(() => fetchApi('path2'))),
)
`ts`
useEnhancedEffect(
() => fetchApi('path1').subscribe(() => fetchApi('path2').subscribe()), // Just for demo, do not write like this
)
Similar to componentDidMount
Similar to componentWillUnmount
Enhanced useCallback, support subscribe and unsubscribe Observable automatically, support nested unsubscribe
`ts`
const doSth = useEnhancedCallback(
() => fetchApi('path1').pipe(switchMap(() => fetchApi('path2'))),
[],
)
`ts`
const doSth = useEnhancedCallback(
() => fetchApi('path1').subscribe(() => fetchApi('path2').subscribe()), // Just for demo, do not write like this
[],
)
Used to judge whether the Modal content has been rendered
`ts
const [formRendered] = useRendered(visible)
useEffect(() => {
if (
formRendered.current &&
// We only need to resetFields after modal open so that initialValues will have been updated correctly`
visible
) {
resetError()
form.resetFields()
}
}, [form, formRendered, resetError, visible])
:::warning
useRendered returns Ref, its reference will never change, so do not try to set formRendered.current as a variable outside useEffect
:::
Get latest value from Observable with subscribe and unsubscribe automatically
Handle Promise with abort support
and useSessionStorageSync data to/from localStorage or sessionStorage across components
Timer based on setInterval
`ts``
useInterval(refresh, REFRESH_INTERVAL)
| 1stG | RxTS | UnTS |
| ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|  |  |  |
| 1stG | RxTS | UnTS |
| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|  |  |  |
Detailed changes for each release are documented in CHANGELOG.md.
[MIT][] Ā© [JounQin][]@[1stG.me][]
[1stg.me]: https://www.1stg.me
[jounqin]: https://GitHub.com/JounQin
[mit]: http://opensource.org/licenses/MIT