Using device types

📘

This is an article for advanced users of Frontastic.

To use different configurations per device within your Frontastic component, you can use Tastify. This adapts your Frontastic components 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.