Skip to main content


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 { 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.


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.


propValueYes{breakpoint: value}An object that specifies the values for different breakpoints. This object is used to determine the return value of the hook.