Skip to main content

Function: useResponsive()

useResponsive(): object

Defined in: hooks/useResponsive.ts:114

Hook to access and manage responsive design utilities and breakpoint information.

Returns​

object

Object containing responsive utilities

currentBreakpoint​

currentBreakpoint: string

isBreakpoint()​

isBreakpoint: (breakpoint) => boolean

Parameters​

breakpoint​

string

Returns​

boolean

isSmaller()​

isSmaller: (width) => boolean

Parameters​

width​

number

Returns​

boolean

isLarger()​

isLarger: (width) => boolean

Parameters​

width​

number

Returns​

boolean

getResponsiveStyle()​

getResponsiveStyle: <T>(style) => T

Type Parameters​

T​

T

Parameters​

style​

T

Returns​

T

Examples​

const MyComponent = () => {
  const { currentBreakpoint, isBreakpoint, getResponsiveStyle } = useResponsive();

  const responsiveStyle = getResponsiveStyle({
    fontSize: 16,
    '&:tablet': { fontSize: 20 },
    '&:desktop': { fontSize: 24 }
  });

  return (
    <Text style={responsiveStyle}>
      Current breakpoint: {currentBreakpoint}
    </Text>
  );
};
const MyComponent = () => {
  const { isSmaller, isLarger, isBreakpoint } = useResponsive();

  return (
    <View>
      {isBreakpoint('mobile') && <Text>Mobile view</Text>}
      {isSmaller(768) && <Text>Small screen</Text>}
      {isLarger(1024) && <Text>Large screen</Text>}
    </View>
  );
};