Using device types

📘

This is an article for advanced users of Frontastic.

To use different configurations per device within your Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., you can use Tastify. This adapts your Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. and connects to the DeviceType, find out how to do that in the Tastify article.

Or, you can use our useDeviceType hook. To do this, you need to import it into you this Tastic.js using the below:

import { useDeviceType } from '../helper/hooks/useDeviceType'

Then when writing what you want each device to do, you'll need to use either 'mobile', 'tablet', or 'desktop' as these are what are defined in the DeviceType hook. For example:

const deviceType = useDeviceType();

const getNumberOfSlidesVisible = () => {
  if (deviceType === 'mobile') {
    return config.items ? config.items.mobile : 2;
  }
  if (deviceType === 'tablet') {
    return config.items ? config.items.tablet : 3;
  }
  if (deviceType === 'desktop') {
    return config.items ? config.items.desktop : 4;
  }
};

Then you can use them as you want to.


Did this page help you?