Function useResponsive

Custom hook to handle responsive design based on breakpoints.

Function

getResponsiveValue

Function

getNextCategory

Function

interpolate

Function

useEffect

Description

  • Effect hook to handle window resize events and update the state accordingly.
  • useResponsive(customBreakpoints?): {
        getResponsiveValue: ((range: {
            max: number;
            min: number;
        }, category:
            | "xs"
            | "sm"
            | "md"
            | "lg"
            | "xl") => number);
        orientation: any;
        sizeCategory: any;
    }

  • Parameters

    • customBreakpoints: {
          lg: {
              landscape: number;
              portrait: number;
          };
          md: {
              landscape: number;
              portrait: number;
          };
          sm: {
              landscape: number;
              portrait: number;
          };
          xl: {
              landscape: number;
              portrait: number;
          };
          xs: {
              landscape: number;
              portrait: number;
          };
      } = defaultBreakpoints

      Custom breakpoints to override the default breakpoints.

      • lg: {
            landscape: number;
            portrait: number;
        }
        • landscape: number
        • portrait: number
      • md: {
            landscape: number;
            portrait: number;
        }
        • landscape: number
        • portrait: number
      • sm: {
            landscape: number;
            portrait: number;
        }
        • landscape: number
        • portrait: number
      • xl: {
            landscape: number;
            portrait: number;
        }
        • landscape: number
        • portrait: number
      • xs: {
            landscape: number;
            portrait: number;
        }
        • landscape: number
        • portrait: number

    Returns {
        getResponsiveValue: ((range: {
            max: number;
            min: number;
        }, category:
            | "xs"
            | "sm"
            | "md"
            | "lg"
            | "xl") => number);
        orientation: any;
        sizeCategory: any;
    }

    • An object containing the current orientation, size category, and a function to get responsive values.
    • getResponsiveValue: ((range: {
          max: number;
          min: number;
      }, category:
          | "xs"
          | "sm"
          | "md"
          | "lg"
          | "xl") => number)
        • (range, category): number

        • Parameters

          • range: {
                max: number;
                min: number;
            }
            • max: number
            • min: number
          • category:
                | "xs"
                | "sm"
                | "md"
                | "lg"
                | "xl"

          Returns number

    • orientation: any
    • sizeCategory: any

Settings

Member Visibility