Skip to content

Commit

Permalink
feat(docs): useIsmorphicLayoutEffect
Browse files Browse the repository at this point in the history
  • Loading branch information
Pyr33x committed Jan 29, 2025
1 parent 15039ab commit e751c37
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 6 deletions.
50 changes: 50 additions & 0 deletions apps/docs/content/docs/cli/hooks/useIsmorphicLayoutEffect.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
title: useIsomorphicLayoutEffect
description: Conditionally invokes useLayoutEffect on the server and useEffect on the client.
---

import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";

# useIsomorphicLayoutEffect

## Installation

<Tabs items={["CLI"]}>
<Tab value="CLI">
<DynamicCodeBlock
lang="bash"
code="npx rehooks-cli@latest add useIsomorphicLayoutEffect"
/>
</Tab>
</Tabs>

## Usage

```tsx title="Component.tsx"
import { useIsomorphicLayoutEffect } from "~/hooks/useIsomorphicLayoutEffect";

function Component() {
useIsomorphicLayoutEffect(() => {
console.log("useIsomorphicLayoutEffect");
}, []);

return <div>Component</div>;
}
```

## API

### useIsomorphicLayoutEffect

```ts title="useIsomorphicLayoutEffect.ts"
const useIsomorphicLayoutEffect =
typeof window !== "undefined" ? useLayoutEffect : useEffect;
```

#### Parameters

| Name | Type | Description |
| -------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------- |
| callback | `EffectCallback` | The function to execute on each render. |
| deps? | `any[]` | An array of values that indicate when the effect should update. If none of the values change, the effect will not run. |
6 changes: 0 additions & 6 deletions packages/core/src/useIsmorphicLayoutEffect/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@ const description =

/**
* Conditionally invokes useLayoutEffect on the server and useEffect on the client.
*
* @template {() => void} T - Function type for the effect callback
* @param {T} callback - Function to execute on mount and unmount
* @param {any[]} deps - Dependencies array for the effect
*
* @returns {void}
*/
export const useIsomorphicLayoutEffect =
typeof window !== "undefined" ? useLayoutEffect : useEffect;

0 comments on commit e751c37

Please sign in to comment.