useBreakpointValue

useBreakpointValue returns the value for the current breakpoint based on the provided responsive values object.
Installation
API Reference
This is an illustration of useBreakPointValue hook.
function App() {
const flexDir = useBreakpointValue({
default: "column",
sm: "row",
})
return (
<VStack
style={{
flexDirection: flexDir,
gap: 10,
}}
>
<Box className={"justify-center items-center p-4 rounded bg-primary-500"}>
<Text className="font-bold text-typography-0">Box 1</Text>
</Box>
<Box className={"justify-center items-center p-4 rounded bg-primary-600"}>
<Text className="font-bold text-typography-0">Box 2</Text>
</Box>
<Box className={"justify-center items-center p-4 rounded bg-primary-700"}>
<Text className="font-bold text-typography-0">Box 3</Text>
</Box>
</VStack>
)
}

Installation

Run the following command:

npx gluestack-ui add useBreakPointValue

API Reference

To use this component in your project, include the following import statement in your file.
import { useBreakPointValue } from "@/components/ui/utils/use-break-point-value"
const flexDir = useBreakpointValue({
default: "column",
sm: "row",
})

Hook Arguments

This section provides a comprehensive reference list for the hook arguments, detailing descriptions, properties, types, and default behavior for easy project integration.

useBreakPointValue

Name
Type
Default
options
Record<breakPoints | default,value>
-

Return Value

The useBreakPointValue hook returns value, based on given break point value object.