[@mantine/hooks] use-mounted: Init hook

Author: rtivital

docs/src/mdx/data/mdx-hooks-data.ts

@@ -156,4 +156,5 @@ export const MDX_HOOKS_DATA: Record<string, Frontmatter> = {
     'useMutationObserver',
     'Subscribe to changes being made to the DOM tree'
   ),
+  useMounted: hDocs('useMounted', 'Returns true if the component is mounted'),
 };

docs/src/mdx/mdx-pages-group.ts

@@ -140,6 +140,7 @@ export const MDX_PAGES_GROUPS: MdxPagesGroup[] = [
           MDX_DATA.useIsomorphicEffect,
           MDX_DATA.useLogger,
           MDX_DATA.useShallowEffect,
+          MDX_DATA.useMounted,
         ],
       },
     ],

docs/src/pages/changelog/7-7-0.mdx

@@ -29,3 +29,4 @@ New [useMutationObserver](/hooks/use-mutation-observer) hook:
 ## Other changes
 
 - [SegmentedControl](/core/segmented-control) indicator positioning logic has been migrated to [FloatingIndicator](/core/floating-indicator). It is now more performant and works better when used inside elements with `transform: scale()`.
+- New [use-mounted](/hooks/use-mounted) hook

docs/src/pages/hooks/use-mounted.mdx

@@ -0,0 +1,27 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+
+export default Layout(MDX_DATA.useMounted);
+
+## Usage
+
+`useMounted` hook returns `true` if component is mounted and `false` if it's not.
+
+```tsx
+import { useMounted } from '@mantine/hooks';
+
+function Demo() {
+  const mounted = useMounted();
+  return (
+    <div>
+      {mounted ? 'Component is mounted' : 'Component is not mounted'}
+    </div>
+  );
+}
+```
+
+## Definition
+
+```tsx
+function useMounted(): boolean;
+```

packages/@docs/styles-api/src/data/SegmentedControl.styles-api.ts

@@ -8,6 +8,7 @@ export const SegmentedControlStylesApi: StylesApiData<SegmentedControlFactory> =
     input: 'Input element (`input[type="radio"]`), hidden by default',
     label: 'Label element associated with input',
     indicator: 'Floating indicator that moves between items',
+    innerLabel: 'Wrapper of label element children',
   },
 
   vars: {

packages/@mantine/hooks/src/index.ts

@@ -62,6 +62,7 @@ export { useHeadroom } from './use-headroom/use-headroom';
 export { useEyeDropper } from './use-eye-dropper/use-eye-dropper';
 export { useInViewport } from './use-in-viewport/use-in-viewport';
 export { useMutationObserver } from './use-mutation-observer/use-mutation-observer';
+export { useMounted } from './use-mounted/use-mounted';
 
 export type { UseMovePosition } from './use-move/use-move';
 export type { OS } from './use-os/use-os';

packages/@mantine/hooks/src/use-mounted/use-mounted.ts

@@ -0,0 +1,7 @@
+import { useEffect, useState } from 'react';
+
+export function useMounted() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted;
+}