Skip to main content

Function: useResponsive()

useResponsive(): object

Defined in: hooks/useResponsive.ts:110

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>
);
};