custom-component

Custom Component Props Pattern

Overview

Components use Mantine’s useProps hook to read style-oriented defaults from the centralized application theme. Visual behavior can be adjusted via theme configuration without changing component code.

Pattern structure

1. Inside the component

Every component that follows this pattern should:

import { useProps } from "@mantine/core";

// Define default style props
const defaultStyleProps = {
  buttonProps: { variant: 'contained' as const },
  downloadTooltipProps: { placement: 'top' as const },
  // ... other style props
};

export default function ComponentName(props: ComponentProps) {
  // Resolve style props with useProps
  const {
    buttonProps,
    downloadTooltipProps,
    downloadButtonProps,
    parameterValues,
    ...rest
  } = useProps("ComponentName", defaultStyleProps, props);

  // Use the resolved props in JSX
  return (
    <Tooltip {...downloadTooltipProps}>
      <Button {...buttonProps}>
        {/* component content */}
      </Button>
    </Tooltip>
  );
}

useProps arguments:

1. "ComponentName" — exact component id (string identifier).
2. defaultStyleProps — default values for style props.
3. props — incoming component props (override theme values).

2. In useCustomTheme.ts

Register overrides for the component under components in src/shared/shared/ui/theme/useCustomTheme.ts:

export const customTheme: MantineThemeOverride = {
  components: {
    /**
     * ExportButtonComponent
     *
     * Component for export functionality
     */
    ExportButtonComponent: ExportButtonComponentThemeProps({
      // buttonProps: {
      //   variant: "light",
      //   fullWidth: true,
      // },
      // downloadTooltipProps: {
      //   label: "Download file",
      //   position: "top",
      // },
    }),
  }
};

Rules for custom components

1. Naming convention

• Component: ComponentName (PascalCase).
• useProps id: must match the component name exactly.
• Theme props type: ComponentNameThemeProps or ComponentNameThemePropsType.
• Theme factory: ComponentNameThemeProps() registered in useCustomTheme.ts.