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 (<VStackstyle={{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
CLI
Manual
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.