@rodjosh/react-responsive-props v1.0.3
react-responsive-props
Is a simple library on top of react-responsive that allows to change component props based on breakpoints
Installation
yarn add @rodjosh/react-responsive-props
Usage
import { useResponsive } from "@rodjosh/react-responsive-props"
const Text = ({children}) => {
return <h1>{children}</h1>
}
const App = () => {
const responsiveComponent = useResponsive();
const ResponsiveText = responsiveComponent<typeof Text>(Text, {
sm: {
children: 'Larger phone'
},
md: {
children: 'Tablet'
},
lg: {
children: 'Desktop'
},
xl: {
children: 'Large Desktop
}
});
return (
<div>
<ResponsiveText>
Phone (Default)
</ResponsiveText>
</div>
);
};
To use this library you need to import the useResponsive
hook, it'll return another function that will create a HOC for the component, in the arguments of the returned function you can pass the desired property per breakpoint. The passed property when called on the JSX is the default one (whenever is an attribute or a children)
useResponsive
The useResponsive hook takes one optional argument, an object with the breakpoints sizes, if no object is passed then it uses the default breakpoints. The breakpoints sizes are in pixels (px). Example:
useResponsive({
sm: 320,
md: 481,
lg: 769,
xl: 1025
});
responsiveComponent
This is the returned function of the hook, the name is optional and you can change it at your will. It takes 2 arguments (and a generic type for typescript, simply put typeof Component
and replace "Component" with the name of your component).
The first argument is the component to be affected, and the second argument is the properties to be changed per breakpoint on that component.
NOTE: all the breakpoints are optionals, and them override the default props, so no matter if it's on the lg
breakpoint but you only defined the md
breakpoint, it will still use md
. This works like a "cascade" where the last props definition it's used on non-defined breakpoints where the "last" defintion are the default props
const ResponsiveText = responsiveComponent<typeof Text>(Text, {
md: {
children: 'I only show on Tablets'
}
xl: {
children: 'I only show on Desktops'
}
});
Result
Now that we have our ResponsiveText
defined, we can use it and ALL the attributes and children we define will be the "defaults"
<ResponsiveText>
I only show on Phones
</ResponsiveText>
Typescript
This library is typed, so when you define the properties on the breakpoints, you'll get the IDE suggestions and warnings.