[docs] Update hooks docs (mantinedev#1261)

* use-hotkeys update type definition

* docs: standardise hook intro

* fix review comments

docs/src/docs/hooks/use-color-scheme.mdx

@@ -15,10 +15,10 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Hook uses [use-media-query](/hooks/use-media-query/) hook under the hood.
-Hook relies on `window.matchMedia()` [API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
-and will always return `light` if api is not available (e.g. during server side rendering).
-
-Hook returns either `dark` or `light` value:
+use-color-scheme returns color scheme value i.e. either `dark` or `light`:
 
 <Demo data={HooksDemos.useColorSchemeDemo} />
+
+Hook uses [use-media-query](/hooks/use-media-query/) hook under the hood.
+Hook relies on `window.matchMedia()` [API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+and will always return `light` if the api is not available (e.g. during server side rendering).

docs/src/docs/hooks/use-debounced-value.mdx

@@ -15,7 +15,7 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Use hook to debounce value change.
+use-debounced-value to debounce value change.
 This can be useful in case you want to perform a heavy operation based on react state,
 for example, send search request.
 

docs/src/docs/hooks/use-focus-trap.mdx

@@ -15,8 +15,8 @@ import { ModalDemos, MenuDemos } from '@mantine/demos';
 
 ## Usage
 
-Use use-focus-trap hook to trap focus at given node, for example in modal, drawer or menu.
-Node must include at least one focusable element. When node unmounts, focus trap automatically disabled.
+use-focus-trap traps focus at given node, for example in modal, drawer or menu.
+Node must include at least one focusable element. When node unmounts, focus trap is automatically disabled.
 
 ```tsx
 import { useFocusTrap } from '@mantine/hooks';

docs/src/docs/hooks/use-force-update.mdx

@@ -15,7 +15,7 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Hook returns a function, when this function is called component rerenders:
+use-force-update returns a function, which when called rerenders the component:
 
 <Demo data={HooksDemos.useForceUpdateDemo} />
 

docs/src/docs/hooks/use-fullscreen.mdx

@@ -15,7 +15,7 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Hook allows to enter/exit fullscreen for given element using the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API).
+use-fullscreen allows to enter/exit fullscreen for given element using the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API).
 By default, if you don't provide ref, hook will target `document.documentElement`:
 
 <Demo data={HooksDemos.useFullscreenDemo} />

docs/src/docs/hooks/use-hash.mdx

@@ -15,7 +15,7 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Hook lets you get hash from url, subscribe to its changes with [hashchange event](https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event) and set it:
+use-hash lets you get hash from url, subscribe to its changes with [hashchange event](https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event) and set it:
 
 <Demo data={HooksDemos.useHashDemo} />
 

docs/src/docs/hooks/use-hotkeys.mdx

@@ -15,7 +15,7 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Hook accepts an array with hotkey and handler tuples:
+use-hotkeys accepts an array of hotkeys and handler tuples:
 
 - `hotkey` - hotkey string e.g. `ctrl+E`, `shift+alt+L`, `mod+S`
 - `handler` - event handler called when given combination was pressed
@@ -54,5 +54,5 @@ which should be used with `onKeyDown`:
 ## Definition
 
 ```tsx
-function useHotkeys(hotkey: string, handler: (event: KeyboardEvent) => void): void;
+function useHotkeys(hotKeyItem: Array<[hotkey: string, handler: (event: KeyboardEvent) => void]>): void;
 ```

docs/src/docs/hooks/use-idle.mdx

@@ -15,7 +15,7 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Hook detect if user does nothing for given time in ms:
+use-idle detects if user does nothing for given time in ms:
 
 <Demo data={HooksDemos.useIdleDemo} />
 

docs/src/docs/hooks/use-intersection.mdx

@@ -15,8 +15,8 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Use hook to get information about intersection
-of given element with its scroll container or body element with [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API):
+use-intersection gets information about the intersection
+of a given element with its scroll container or body element with [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API):
 
 <Demo data={HooksDemos.useIntersectionDemo} />
 

docs/src/docs/hooks/use-isomorphic-effect.mdx

@@ -13,7 +13,7 @@ source: 'mantine-hooks/src/use-isomorphic-effect/use-isomorphic-effect.ts'
 
 ## Usage
 
-Hook allows you to switch between useEffect during server side rendering and useLayoutEffect after hydration.
+use-isomorphic-effect allows you to switch between useEffect during server side rendering and useLayoutEffect after hydration.
 Use it wherever you would use useLayoutEffect to avoid warnings during ssr:
 
 ```tsx

docs/src/docs/hooks/use-logger.mdx

@@ -15,7 +15,7 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Hook logs given values to console each time component renders, do not use in production. Open devtools to see state changes in console:
+use-logger logs given values to console each time component renders, do not use in production. Open devtools to see state changes in console:
 
 <Demo data={HooksDemos.useLoggerDemo} />
 

docs/src/docs/hooks/use-merged-ref.mdx

@@ -13,8 +13,8 @@ source: 'mantine-hooks/src/use-merged-ref/use-merged-ref.ts'
 
 ## Usage
 
-Hook accepts any amount of refs and returns function that should be passed to dom node.
-Use hook when you need to use more than one ref on single dom node, for example,
+use-merged-ref accepts any amount of refs and returns a function that should be passed to dom node.
+Use this hook when you need to use more than one ref on single dom node, for example,
 when you want to use [use-click-outside](/hooks/use-click-outside/) and [use-focus-trap](/hooks/use-focus-trap/) hooks and also get a ref for yourself:
 
 ```tsx

docs/src/docs/hooks/use-mouse.mdx

@@ -15,8 +15,6 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Provide ref to track mouse position over any element:
-
 <Demo data={HooksDemos.useMouseRef} />
 
 If you do not provide ref mouse position will be captured relative to document element:

docs/src/docs/hooks/use-os.mdx

@@ -15,8 +15,8 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Hook detects user os. Possible values are: `undetermined`, `macos`, `ios`, `windows`, `android`, `linux`.
-If os cannot be identified as well as during server side rendering `undetermined` will be returned.
+use-os detects user's os. Possible values are: `undetermined`, `macos`, `ios`, `windows`, `android`, `linux`.
+If os cannot be identified, for example, during server side rendering `undetermined` will be returned.
 
 <Demo data={HooksDemos.useOsDemo} />
 

docs/src/docs/hooks/use-queue.mdx

@@ -15,7 +15,7 @@ import { NotificationsDemos } from '@mantine/demos';
 
 ## Usage
 
-Use this hook when you need to limit amount of data in current state and place the rest of it in queue.
+use-queue limits the amount of data in current state and place the rest of it in a queue.
 For example, in [@mantine/notifications](/others/notifications/) package amount of
 notifications that is currently displayed is limited and other new notifications are added to queue and displayed once
 available space appears.

docs/src/docs/hooks/use-toggle.mdx

@@ -15,7 +15,7 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Hook implements common state pattern – it switches state between two given values:
+use-toggle implements a common state pattern – it switches state between two given values:
 
 <Demo data={HooksDemos.useToggleDemo} />
 

docs/src/docs/hooks/use-uncontrolled.mdx

@@ -13,7 +13,7 @@ source: 'mantine-hooks/src/use-uncontrolled/use-uncontrolled.ts'
 
 ## Usage
 
-Hook allows you to manage state for both controlled and uncontrolled components:
+use-uncontrolled allows you to manage state for both controlled and uncontrolled components:
 
 ```tsx
 import { useUncontrolled } from '@mantine/hooks';

docs/src/docs/hooks/use-validated-state.mdx

@@ -13,7 +13,7 @@ source: 'mantine-hooks/src/use-validated-state/use-validated-state.ts'
 
 ## Usage
 
-Hook validates state with a given rule each time state is set. It returns an object with current validation state, last valid value and current value:
+use-validated-state validates state with a given rule each time state is set. It returns an object with current validation state, last valid value and current value:
 
 ```tsx
 const [{ lastValidValue, value, valid }, setValue] = useValidatedState(

docs/src/docs/hooks/use-viewport-size.mdx

@@ -15,7 +15,7 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Hook returns current viewport width and height, it subscribes to `resize` and `orientationchange` events,
+use-viewport-size returns current viewport width and height, it subscribes to `resize` and `orientationchange` events,
 during ssr hook will return `{ width: 0, height: 0 }`:
 
 <Demo data={HooksDemos.useViewportSizeDemo} />

docs/src/docs/hooks/use-window-scroll.mdx

@@ -15,7 +15,7 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-Hook returns current scroll position and a function to scroll smoothly to given position:
+use-window-scroll returns current scroll position and a function to scroll smoothly to given position:
 
 <Demo data={HooksDemos.useWindowScrollDemo} />