useResponsiveProp
The useResponsiveProp is a custom hook provided by Pearl UI. It is designed to fetch the appropriate value from a responsive style object based on the current screen size. This allows for dynamic styling that adapts to different device screens.
Import#
import { useResponsiveProp } from "pearl-ui";Return value#
The useResponsiveProp hook returns the value that corresponds to the breakpoint of the active device. This means it will return the value that matches the current screen size.
Usage#
const responsiveWidth = useResponsiveProp({ phone: "100%", tablet: "50%", largeTablet: 300,});In the example above, the responsiveWidth will be "100%" on phones, "50%" on tablets, and "300" on large tablets.
Parameters#
| Name | Required | Type | Description |
|---|---|---|---|
propValue | Yes | An object that specifies the values for different breakpoints. This object is used to determine the return value of the hook. |