11 |
16 | Introduction
17 |
18 | useHooks(🔥).ts
19 | is a React hooks library, written in Typescript and easy to use. It
20 | provides a set of hooks that enables you to build your React
21 | applications faster. The hooks are built upon the principles of{' '}
22 | DRY (Don't Repeat
23 | Yourself). There are hooks for most common use cases you might need.
24 |
25 |
26 | The library is designed to be as minimal as possible. It is fully
27 | tree-shakable (using the ESM version), meaning that you only import
28 | the hooks you need, and the rest will be removed from your bundle
29 | making the cost of using this library negligible. Most hooks are
30 | extensively tested and are being used in production environments.
31 |
32 | Install
33 |
34 | Get started installing{' '}
35 |
36 | usehooks-ts
37 | {' '}
38 | using your preferred package manager.
39 |
40 |
49 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/packages/usehooks-ts/src/useDarkMode/useDarkMode.md:
--------------------------------------------------------------------------------
1 | This React Hook offers you an interface to set, enable, disable, toggle and read the dark theme mode.
2 | The returned value (`isDarkMode`) is a boolean to let you be able to use with your logic.
3 |
4 | It uses internally [`useLocalStorage()`](/react-hook/use-local-storage) to persist the value and listens the OS color scheme preferences.
5 |
6 | **Note**: If you use this hook in an SSR context, set the `initializeWithValue` option to `false`.
7 |
--------------------------------------------------------------------------------
/packages/usehooks-ts/src/useDebounceCallback/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useDebounceCallback'
2 |
--------------------------------------------------------------------------------
/packages/usehooks-ts/src/useDebounceCallback/useDebounceCallback.demo.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | import { useDebounceCallback } from './useDebounceCallback'
4 |
5 | export default function Component() {
6 | const [value, setValue] = useState('')
7 |
8 | const debounced = useDebounceCallback(setValue, 500)
9 |
10 | return (
11 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/packages/usehooks-ts/src/useDebounceCallback/useDebounceCallback.md:
--------------------------------------------------------------------------------
1 | Creates a debounced version of a callback function.
2 |
3 | ### Parameters
4 |
5 | - `func`: The callback function to be debounced.
6 | - `delay` (optional): The delay in milliseconds before the callback is invoked (default is 500 milliseconds).
7 | - `options` (optional): Options to control the behavior of the debounced function.
8 |
9 | ### Returns
10 |
11 | A debounced version of the original callback along with control functions.
12 |
13 | ### Dependency
14 |
15 | This hook is built upon [`lodash.debounce`](https://www.npmjs.com/package/lodash.debounce).
16 |
17 | ### Related hooks
18 |
19 | - [`useDebounceValue`](/react-hook/use-debounce-value): Built on top of `useDebounceCallback`, it returns the debounce value instead
20 |
--------------------------------------------------------------------------------
/packages/usehooks-ts/src/useDebounceValue/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useDebounceValue'
2 |
--------------------------------------------------------------------------------
/packages/usehooks-ts/src/useDebounceValue/useDebounceValue.demo.tsx:
--------------------------------------------------------------------------------
1 | import { useDebounceValue } from './useDebounceValue'
2 |
3 | export default function Component({ defaultValue = 'John' }) {
4 | const [debouncedValue, setValue] = useDebounceValue(defaultValue, 500)
5 |
6 | return (
7 |