Adaptive Mode

useAdaptiveMode

The useAdaptiveMode hook can be used to get the current adaptive mode based on the current context & device. In this example the button will be round only on iOS devices.

import { useAdaptiveMode } from "adaptive-material-ui/adaptiveMode";
import { AdaptiveButton } from "adaptive-material-ui/components/button";

export default function () {
  const adaptiveMode = useAdaptiveMode();

  return <AdaptiveButton round={adaptiveMode === "ios"}>Button</AdaptiveButton>;
}

AdaptiveThemeProvider

AdaptiveThemeProvider.theme accepts a function which is passed the current adaptive mode based on the current context & device. In this example all buttons will default to round only on iOS devices.

import { createTheme } from "@mui/material/styles";
import { AdaptiveMode } from "adaptive-material-ui/adaptiveMode";
import { AdaptiveButton } from "adaptive-material-ui/components/button";
import { AdaptiveThemeProvider } from "adaptive-material-ui/theme/adaptiveThemeProvider";
// 👇 Note the type import required for TypeScript
import type {} from "adaptive-material-ui/theme/themeAugmentation";

function createAdaptiveTheme(adaptiveMode: AdaptiveMode) {
  return createTheme({
    components: {
      AdaptiveButton: {
        defaultProps: { round: adaptiveMode === "ios" },
      },
    },
  });
}

export default function () {
  return (
    <AdaptiveThemeProvider theme={createAdaptiveTheme}>
      <AdaptiveButton>Button</AdaptiveButton>
    </AdaptiveThemeProvider>
  );
}

Mode Specific Components

Most components with behavior that varies based on device type have component counterparts for each device type, for example AdaptiveSlider has SliderAndroid, SliderDesktop, & SliderIOS. These components can be used directly to have the same behavior across all devices, like in the following example where the SliderIOS component is used.

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { SliderIOS } from "adaptive-material-ui/components/slider";

export default function () {
  return (
    <AdaptiveModeDemo>
      <SliderIOS defaultValue={30} />
    </AdaptiveModeDemo>
  );
}

Note:

  • The font will not vary between components since it's applied via AdaptiveThemeProvider.
  • To style the components via a theme use the MUI component names instead of the Adaptive ones (eg. MuiButton not AdaptiveButton)