Skip to main content

Customizer

Overview​

Customizer is a tool in your app that lets users change how the app looks and feels. They can pick different colors, switch between light or dark mode, choose the layout style (like vertical or side-by-side), and set the text direction (left-to-right or right-to-left).

Using Customizer in Starter Kit?

While adding customizer in the starter-kit, you must add the disableDirection prop in the Customizer component otherwise it will show LTR and RTL inside the customizer. If you have added more than 1 languages or implemented i18n in Starter Kit and one of the languages is RTL, you can remove the disableDirection prop.

Usage​

You can find the customizer code in the src/@core/components/customizer/index.tsx file. To use the Customizer component, import it into your Next.js page or component:

import Customizer from '@core/components/customizer'

Then, add the Customizer component to your page or component:

<Customizer />

Props​

Customizer lets you change these things:

NameTypeDefaultDescription
breakpointxs, sm, md, lg, xl, xxl, ${number}px, ${number}rem or ${number}emlgDetermines the breakpoint for displaying the customizer.
dirltr or rtlltrThe direction of the customizer.
disableDirectionbooleanfalseIf true, the direction section will be removed from the customizer.

How to override Customizer​

Please refer here to customize the Customizer component.

To change the direction based on selected language, e.g., Portuguese ('pt') for LTR and Hebrew ('he') for RTL, you can use the getLocalePath function to get the path for the selected language.

Make sure these languages are set up in src/config/i18n.ts and src/utils/getDictionary.ts files and src/data/dictionaries folder.

src/components/customizer/index.tsx
<div className='flex items-center gap-4'>
  {/* For Portuguese (LTR) */}
  <Link href={getLocalePath(pathName, 'pt')}>
    ...
  </Link>
  {/* For Hebrew (RTL) */}
  <Link href={getLocalePath(pathName, 'he')}>
    ...
  </Link>
</div>