Customizing Breakpoints

Our library supports responsive design by allowing different values for various breakpoints. By default, we provide a set of common breakpoints, but we understand that you might need to define your own to match your project’s design system.

This guide will walk you through the steps to define custom breakpoints and use them with our library.

Default Breakpoints

The library includes the following default breakpoints:

• xs: Extra small devices
• sm: Small devices (e.g., mobile phones)
• md: Medium devices (e.g., tablets)
• lg: Large devices (e.g., desktops)
• xl: Extra large devices

Extending Default Breakpoints

To add your custom breakpoints, you’ll need to use TypeScript’s module augmentation feature. This allows you to extend existing types or enums without modifying the original source code.

Here’s how you can extend the DefaultBreakpoints enum with a custom breakpoint:

declare module '@ncremental/ncr-contentful' {
  export enum DefaultBreakpoints {
    // Add your custom breakpoints here
    xxl = 'xxl', // Example custom breakpoint
  }
}

Ensure that you import this file somewhere in your project to include your custom breakpoints in the compiled JavaScript.

Using Custom Breakpoints

After defining your custom breakpoints, you can use them just like the default ones. Here’s an example of setting a responsive value using both default and custom breakpoints:

import {ResponsiveField} from "@ncremental/ncr-contentful";
 
// Define a responsive value with custom breakpoints
const responsiveSetting: ResponsiveField<number> = {
  xs: 1,
  sm: 2,
  md: 3,
  lg: 4,
  xl: 5,
  xxl: 6, // Your custom breakpoint
};

Best Practices

• Consistency: Try to be consistent with your breakpoints across your project to ensure a uniform responsive design.
• Documentation: Document your custom breakpoints and their intended usage to ensure team members understand the responsive design strategy.

If you encounter any issues or have suggestions for improving the library, please reach out to our support team or submit an issue on our GitHub repository.