⚠️ beta

Config

Custom Adaptive Logic

AdaptiveThemeProvider.adaptiveModeInfo can be set if you want to use a different user agent or completely control the adaptive logic yourself. The theme uses AdaptiveModeContext to pass this info to the child components which can be used separately if needed.

Different User Agent

Theme

import { AdaptiveThemeProvider } from "adaptive-material-ui/theme/adaptiveThemeProvider";

<AdaptiveThemeProvider
  adaptiveModeInfo={{ userAgent: req.headers["user-agent"] }}
></AdaptiveThemeProvider>;

Context

import { AdaptiveModeContext } from "adaptive-material-ui/adaptiveMode";

<AdaptiveModeContext.Provider
  value={{ userAgent: req.headers["user-agent"] }}
></AdaptiveModeContext.Provider>;

Custom Logic

Theme

import { AdaptiveThemeProvider } from "adaptive-material-ui/theme/adaptiveThemeProvider";

let mode = "android";
if (user.name === "personIdoNotLike") {
  mode = "desktop";
}

<AdaptiveThemeProvider
  adaptiveModeInfo={{ mode: mode }}
></AdaptiveThemeProvider>;

Context

import { AdaptiveModeContext } from "adaptive-material-ui/adaptiveMode";

let mode = "android";
if (user.name === "personIdoNotLike") {
  mode = "desktop";
}

<AdaptiveModeContext.Provider
  value={{ mode: mode }}
></AdaptiveModeContext.Provider>;

SSR

See the example project using Next.js

Enforce Adaptive Component Use

ESLint can be configured to warn when using MUI components that have Adaptive counterparts by adding the following rule to your ESLint config file. This will for example warn if the <Button> component is used instead of <AdaptiveButton>.

import { restrictToAdaptiveComponents } from "adaptive-material-ui/eslintRule";
import { defineConfig } from "eslint/config";

export default defineConfig({
  rules: {
    "no-restricted-syntax": ["warn", ...restrictToAdaptiveComponents()],
  },
});

Specific components can be excluded by passing a list of MUI names into the excludeComponents option.

import { restrictToAdaptiveComponents } from "adaptive-material-ui/eslintRule";
import { defineConfig } from "eslint/config";

export default defineConfig({
  rules: {
    "no-restricted-syntax": [
      "warn",
      ...restrictToAdaptiveComponents({ excludeComponents: ["Button"] }),
    ],
  },
});

Minimizing Bundle Size

To avoid barrel imports similar ESLint & VS Code settings can be configured as shown here.

ESLint Config

{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "patterns": [
          { "regex": "^@mui/[^/]+$" },
          { "regex": "^adaptive-material-ui$" }
        ]
      }
    ]
  }
}

VS Code Setting

{
  "typescript.preferences.autoImportSpecifierExcludeRegexes": [
    "^@mui/[^/]+$",
    "^adaptive-material-ui$"
  ]
}
ON THIS PAGE