Skip to content

Commit fe903c5

Browse files
mehdibhamehdibha
committed
docs: add some hooks
1 parent 98cfd84 commit fe903c5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1470
-45
lines changed

‎content/blocks/marketing/pages/pricing.mdx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Pricing page
3-
thumbnail: /previews/pages/pricing.png
3+
thumbnail:
4+
image: /previews/pages/pricing.png
45
---
56

67
<ComponentPreview name="blocks/marketing/pages/pricing" aspect="page" centered={false} />

‎content/components/animations/sparkle-button.mdx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
---
22
title: Sparkle button
33
description: A beautiful sparkle animation button
4-
video: /previews/components/animations/sparkle-button.mp4
4+
thumbnail:
5+
image: /previews/components/animations/sparkle-button.jpeg
6+
video: /previews/components/animations/sparkle-button.mp4
57
label: New
68
---
79

‎content/components/utils/client-only.mdx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: Client only
3+
description: A component that ensures that the component is only rendered on the client side.
4+
---
5+
6+
{/* useSyncExternalStore */}

‎content/hooks/browser/use-media-query.mdx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: useMediaQuery
3+
description: Subscribe and respond to media query changes with useMediaQuery.
4+
---
5+
6+
<ComponentPreview name="demos/hooks/use-media-query" />
7+
8+
## Installation
9+
10+
<Steps>
11+
<Step>Copy and paste the following code into your project.</Step>
12+
<ComponentSource name="hooks/use-media-query" />
13+
<Step>Update the import paths to match your project setup.</Step>
14+
</Steps>
15+
16+
## PARAMETERS
17+
18+
| Name | Type | Description |
19+
| ------- | -------- | --------------------------------- |
20+
| `query` | `string` | The media query to listen changes |
21+
22+
## Return value
23+
24+
| Type | Description |
25+
| --------- | --------------------------------------------------------------------------------------------------- |
26+
| `boolean` | Returns a boolean value indicating whether the media query matches the current state of the device. |

‎content/hooks/elements/use-in-view.mdx

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: useInView
3+
description: A simple state hook for when an element is within the viewport.
4+
---

‎content/hooks/elements/use-intersection-observer.mdx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: useIntersectionObserver
3+
description: Track and manage the visibility of your DOM elements within the viewport with useIntersectionObserver.
4+
---
5+
6+
<ComponentPreview name="demos/hooks/use-intersection-observer" />
7+
8+
## Installation
9+
10+
<Steps>
11+
<Step>Copy and paste the following code into your project.</Step>
12+
<ComponentSource name="hooks/use-intersection-observer" />
13+
<Step>Update the import paths to match your project setup.</Step>
14+
</Steps>
15+
16+
## PARAMETERS
17+
18+
| Name | Type | Description |
19+
| ------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
20+
| `threshold` | `number` | Either a single number or an array of numbers between 0 and 1, indicating at what percentage of the target’s visibility the observer’s callback should be executed. |
21+
| `root` | `element` | The Element that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null. |
22+
| `rootMargin` | `string` | Margin around the root. Can have values similar to the CSS margin property. The values can be percentages. This set of values serves to grow or shrink each side of the root element’s bounding box before computing intersections. Defaults to all zeros. |
23+
24+
## Return values
25+
26+
| Name | Type | Description |
27+
| ------- | ------------------ | ------------------------------------------------------------------------------------------------------------- |
28+
| `ref` | `React ref object` | A React reference that can be attached to a DOM element to observe. |
29+
| `entry` | `object` | An object containing information about the intersection. This object is similar to IntersectionObserverEntry. |

‎content/hooks/elements/use-window-size.mdx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: useWindowSize
3+
description: Track the dimensions of the browser window with useWindowSize.
4+
---
5+
6+
<ComponentPreview name="demos/hooks/use-window-size" />
7+
8+
## Installation
9+
10+
<Steps>
11+
<Step>Copy and paste the following code into your project.</Step>
12+
<ComponentSource name="hooks/use-window-size" />
13+
<Step>Update the import paths to match your project setup.</Step>
14+
</Steps>
15+
16+
## Return values
17+
18+
| Name | Type | Description |
19+
| -------- | -------- | -------------------------------------------- |
20+
| `width` | `number` | The current width of the window, in pixels. |
21+
| `height` | `number` | The current height of the window, in pixels. |

‎content/hooks/use-battery.mdx ‎content/hooks/sensors/use-battery.mdx

File renamed without changes.

‎content/hooks/sensors/use-mouse.mdx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: useMouse
3+
description: Track and retrieve the position of the mouse cursor with useMouse.
4+
---
5+
6+
<ComponentPreview name="demos/hooks/use-mouse" />
7+
8+
## Installation
9+
10+
<Steps>
11+
12+
<Step>Copy and paste the following code into your project.</Step>
13+
14+
<ComponentSource name="hooks/use-mouse" />
15+
16+
<Step>
17+
Update the import paths to match your project setup.
18+
</Step>
19+
</Steps>
20+
21+
## Parameters
22+
23+
None
24+
25+
## Return values
26+
27+
| Name | Type | Description |
28+
| ------- | -------- | --------------------------------------------------------------------------------- |
29+
| `state` | `object` | An object representing the current mouse position and element information. |
30+
| `ref` | `object` | A ref object that can be used to track the mouse position on a specific element.. |
31+
32+
The `state` object has the following properties:
33+
34+
| Name | Type | Description |
35+
| ------------------------ | -------- | --------------------------------------------------------------------------------------- |
36+
| `state.x` | `number` | The current horizontal position of the mouse relative to the page. |
37+
| `state.y` | `number` | The current vertical position of the mouse relative to the page. |
38+
| `state.elementX` | `number` | The current horizontal position of the mouse relative to the element’s top-left corner. |
39+
| `state.elementY` | `number` | The current vertical position of the mouse relative to the element’s top-left corner. |
40+
| `state.elementPositionX` | `number` | The current horizontal position of the element relative to the page. |
41+
| `state.elementPositionY` | `number` | The current vertical position of the element relative to the page. |

‎content/hooks/sensors/use-orientation.mdx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: useOrientation
3+
description: Manage and respond to changes in device orientation with useOrientation.
4+
---
5+
6+
<ComponentPreview name="demos/hooks/use-orientation" />
7+
8+
## Installation
9+
10+
<Steps>
11+
12+
<Step>Copy and paste the following code into your project.</Step>
13+
14+
<ComponentSource name="hooks/use-orientation" />
15+
16+
<Step>
17+
Update the import paths to match your project setup.
18+
</Step>
19+
</Steps>
20+
21+
## Paramaters
22+
23+
The `useOrientation` hook does not accept any parameters.
24+
25+
## Return values
26+
27+
| Name | Type | Description |
28+
| ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
29+
| `angle` | `number` | The current orientation angle of the device in degrees. |
30+
| `type` | `string` | The current orientation type of the device (e.g., ‘portrait-primary’, ‘landscape-primary’, ‘portrait-secondary’, ‘landscape-secondary’). If the type cannot be determined, it is ‘UNKNOWN’. |

‎content/hooks/state/use-local-storage.mdx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: useLocalStorage
3+
description: Store, retrieve, and synchronize data from the browser’s localStorage API with useLocalStorage
4+
---
5+
6+
<ComponentPreview name="demos/hooks/use-local-storage" />
7+
8+
## Installation
9+
10+
<Steps>
11+
<Step>Copy and paste the following code into your project.</Step>
12+
<ComponentSource name="hooks/use-local-storage" />
13+
<Step>Update the import paths to match your project setup.</Step>
14+
</Steps>
15+
16+
## Parameters
17+
18+
| Name | Type | Description |
19+
| -------------- | -------- | ---------------------------------------------------------------------------------------- |
20+
| `key` | `string` | The key used to access the local storage value. |
21+
| `initialValue` | `any` | The initial value to use if there is no item in the local storage with the provided key. |
22+
23+
## Return values
24+
25+
| Name | Type | Description |
26+
| ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
27+
| `localState` | `any` | The current state of the value stored in local storage. |
28+
| `handleSetState` | `function` | A function to set the state of the value in the local storage. This function accepts a new value or a function that returns a new value. The value is also saved in the local storage under the provided key. |

‎content/hooks/utils/use-counter.mdx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: useCounter
3+
description: Manage a counter value with minimum and maximum limits with useCounter.
4+
---
5+
6+
<ComponentPreview name="demos/hooks/use-counter" />
7+
8+
## Installation
9+
10+
<Steps>
11+
<Step>Copy and paste the following code into your project.</Step>
12+
<ComponentSource name="hooks/use-counter" />
13+
<Step>Update the import paths to match your project setup.</Step>
14+
</Steps>
15+
16+
## Parameters
17+
18+
| Name | Type | Description |
19+
| --------------- | -------- | ------------------------------------------------ |
20+
| `startingValue` | `number` | The initial value for the counter. Default is 0. |
21+
| `options` | `object` | Additional options for the counter. |
22+
23+
The `options` object has the following properties:
24+
25+
| Name | Type | Description |
26+
| ------------- | -------- | ------------------------------------------ |
27+
| `options.min` | `number` | The minimum value allowed for the counter. |
28+
| `options.max` | `number` | The maximum value allowed for the counter. |
29+
30+
## Return values
31+
32+
The `useCounter` hook returns an array with two elements:
33+
34+
| Name | Type | Params | Description |
35+
| --------------- | ---------- | --------------------- | ---------------------------------------------------- |
36+
| `[0]` | `number` | | The current value of the counter. |
37+
| `[1].increment` | `function` | | Increments the counter by 1. |
38+
| `[1].decrement` | `function` | | Decrements the counter by 1. |
39+
| `[1].set` | `function` | `nextCount`: `number` | Sets the counter to the specified `nextCount` value. |
40+
| `[1].reset` | `function` | | Resets the counter to the initial startingValue. |
41+
42+
## Usage
43+
44+
```tsx
45+
const [count, { increment, decrement, set, reset }] = useCounter(0, { min: 0, max: 10 });
46+
```

‎content/hooks/use-debounce.mdx ‎content/hooks/utils/use-debounce.mdx

File renamed without changes.

‎content/hooks/utils/use-is-client.mdx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: useIsClient
3+
description: Determine whether the code is running on the client-side or server-side with useIsClient.
4+
---
5+
6+
## Installation
7+
8+
<Steps>
9+
<Step>Copy and paste the following code into your project.</Step>
10+
<ComponentSource name="hooks/use-is-client" />
11+
<Step>Update the import paths to match your project setup.</Step>
12+
</Steps>
13+
14+
## Usage
15+
16+
```tsx
17+
import { useIsClient } from "@/hooks/use-is-client";
18+
19+
function MyComponent() {
20+
const isClient = useIsClient();
21+
22+
return <div>{isClient ? "Client-side" : "Server-side"}</div>;
23+
}
24+
```
25+
26+
## Return value
27+
28+
| Name | Type | Description |
29+
| ---------- | --------- | ---------------------------------------------- |
30+
| `isClient` | `boolean` | true if component is mounted, false otherwise. |

‎content/hooks/utils/use-list.mdx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: useList
3+
description: Manage and manipulate lists with useList.
4+
---
5+
6+
<ComponentPreview name="demos/hooks/use-list" />
7+
8+
## Installation
9+
10+
<Steps>
11+
<Step>Copy and paste the following code into your project.</Step>
12+
<ComponentSource name="hooks/use-list" />
13+
<Step>Update the import paths to match your project setup.</Step>
14+
</Steps>
15+
16+
## Parameters
17+
18+
| Name | Type | Description |
19+
| ------------- | ------- | -------------------------------------------------------- |
20+
| `defaultList ` | `array` | The initial list of elements. Default is an empty array. |
21+
22+
## Return values
23+
24+
The `useList` hook returns an array with two elements:
25+
26+
| Name | Type | Params | Description |
27+
| -------------- | ---------- | ----------------------------------- | -------------------------------------------------------------- |
28+
| `[0]` | `array` | | The current list of elements. |
29+
| `[1].set` | `function` | `l`: array` | Replaces the entire list with a new array l. |
30+
| `[1].push` | `function` | `element`:` any` | Appends the element to the end of the list.. |
31+
| `[1].removeAt` | `function` | `index`:` number` | Removes the element at the specified index from the list. |
32+
| `[1].insertAt` | `function` | `index`: `number`,` element`:` any` | Inserts the element at the specified index in the list. |
33+
| `[1].updateAt` | `function` | `index`: `number`,` element`:` any` | Replaces the element at the specified index with the element.. |
34+
| `[1].clear` | `function` | | Removes all elements from the list. |
35+
36+
## Usage
37+
38+
```tsx
39+
const [currentArray, { set, push, removeAt, insertAt, updateAt, clear }] = useList([
40+
1, 2, 3, 4, 5,
41+
]);
42+
```

‎content/hooks/utils/use-mounted.mdx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: useMounted
3+
description: Determine whether the component is mounted or not.
4+
---
5+
6+
## Installation
7+
8+
<Steps>
9+
<Step>Copy and paste the following code into your project.</Step>
10+
<ComponentSource name="hooks/use-mounted" />
11+
<Step>Update the import paths to match your project setup.</Step>
12+
</Steps>
13+
14+
## Usage
15+
16+
```tsx
17+
import { useMounted } from "@/hooks/useMounted";
18+
19+
function MyComponent() {
20+
const isMounted = useMounted();
21+
22+
return <div>{isMounted ? "Mounted" : "Not mounted"}</div>;
23+
}
24+
```
25+
26+
## Return value
27+
28+
| Name | Type | Description |
29+
| ----------- | --------- | -------------------------------------------------------------- |
30+
| `isMounted` | `boolean` | true if running in a client-side environment, false otherwise. |

‎content/hooks/utils/use-previous.mdx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: usePrevious
3+
description: Track the previous value of a variable with usePrevious.
4+
---
5+
6+
<ComponentPreview name="demos/hooks/use-previous" />
7+
8+
## Installation
9+
10+
<Steps>
11+
<Step>Copy and paste the following code into your project.</Step>
12+
<ComponentSource name="hooks/use-previous" />
13+
<Step>Update the import paths to match your project setup.</Step>
14+
</Steps>
15+
16+
## Parameters
17+
18+
| Name | Type | Description |
19+
| ---------- | ----- | -------------------------------------------------- |
20+
| `newValue` | `any` | The new value to track and return the previous of. |
21+
22+
## Return value
23+
24+
| Name | Type | Description |
25+
| --------------- | ----- | ---------------------------------------------- |
26+
| `previousValue` | `any` | The previous value of the provided `newValue`. |

0 commit comments

Comments
 (0)