feat(react-components): add useMount hook with documentation and stories

Author: donskov

packages/react-components/src/hooks/index.ts

@@ -20,4 +20,5 @@ export { useEventCallback } from './use_event_callback';
 export { useEnhancedEffect } from './use_enhanced_effect';
 export { useDebounceCallback } from './use_debounce_callback';
 export { useOutsideClick } from './use_outside_click';
+export { useMount } from './use_mount';
 export { createDialog } from './create_dialog';

packages/react-components/src/hooks/use_mount.mdx

@@ -0,0 +1,40 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import * as Stories from './use_mount.stories';
+
+<Meta title="Hooks/useMount" />
+
+## Overview
+
+React hook that runs a callback only once when the component mounts.
+
+## Usage
+
+```jsx
+import { useMount } from '@peculiar/react-components';
+
+function Child() {
+  useMount(() => {
+    alert('I have been mounted');
+  });
+
+  return <div></div>;
+}
+
+export const Demo = () => {
+  const [mounted, setMounted] = useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setMounted((b) => !b)}>
+        {mounted ? 'Mounted' : 'UnMounted'}
+      </button>
+
+      {mounted ? <Child /> : null}
+    </div>
+  );
+};
+```
+
+## Demo
+
+<Canvas of={Stories.DemoExample} />

packages/react-components/src/hooks/use_mount.stories.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { useMount } from './use_mount';
+
+const meta = {
+  title: 'Hooks/useMount',
+  component: useMount,
+};
+
+export default meta;
+
+function Child() {
+  useMount(() => {
+    alert('I have been mounted');
+  });
+
+  return <div></div>;
+}
+
+export const DemoExample = () => {
+  const [mounted, setMounted] = useState(false);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setMounted((b) => !b)}
+      >
+        {mounted ? 'Mounted' : 'UnMounted'}
+      </button>
+      {mounted ? <Child /> : null}
+    </div>
+  );
+};

packages/react-components/src/hooks/use_mount.ts

@@ -0,0 +1,9 @@
+import { useEnhancedEffect } from './use_enhanced_effect';
+
+/**
+ * React hook that runs a callback only once when the component mounts.
+ * @param callback The callback function to run on mount.
+ */
+export function useMount(callback: () => void) {
+  useEnhancedEffect(callback, []);
+}