useIsomorphicLayoutEffect export

packages/react/src/hooks/index.ts

@@ -1,4 +1,4 @@
 export { useMediaQuery } from './useMediaQuery';
 export { usePrevious } from './usePrevious';
 export { useSynchronizedAnimation } from './useSynchronizedAnimation/useSynchronizedAnimation';
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';

packages/react/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mdx

@@ -0,0 +1,15 @@
+import { Meta, Primary, ArgTypes } from '@storybook/blocks';
+
+<Meta title='Hooks/useIsomorphicLayoutEffect' />
+
+# useIsomorphicLayoutEffect
+
+Hook som bruker enten `useLayoutEffect` eller `useEffect` avhengig av om det kjører på klienten eller serveren.
+
+```tsx
+useIsomorphicLayoutEffect(() => {
+  console.log(
+    'I nettleseren, er eg `useLayoutEffect`, men i SSR, er eg `useEffect`.',
+  );
+}, []);
+```

packages/react/src/hooks/useIsomorphicLayoutEffect.ts → packages/react/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts

@@ -1,3 +1,5 @@
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+
 import { useEffect, useLayoutEffect } from 'react';
 
 export const useIsomorphicLayoutEffect =

packages/react/src/hooks/useSynchronizedAnimation/useSynchronizedAnimation.ts

@@ -3,7 +3,7 @@
 
 import { useRef } from 'react';
 
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 
 /**
  * Synchronizes the css animation of multiple elements with the same `animationName`.

packages/react/src/index.ts

@@ -1,2 +1,2 @@
 export * from './components';
-export { useSynchronizedAnimation } from './hooks';
+export { useSynchronizedAnimation, useIsomorphicLayoutEffect } from './hooks';

packages/react/src/utilities/RovingTabIndex/index.ts

@@ -1,3 +1,5 @@
+// Inspired by radix-ui https://github.com/radix-ui/primitives/blob/main/packages/react/roving-focus/README.md
+
 export { RovingTabindexRoot } from './RovingTabindexRoot';
 export { useRovingTabindex } from './useRovingTabindex';
 export {