Home
Components
Hooks
Apps
Guides

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.