Resval stands for Responsive Values, which is a hook that can return a value based on the current breakpoint. This hook can also respond to the size of the window.
npm install @resval/react-responsive-valuesResval stands for Responsive Values, which is a hook that can return a value based on the current breakpoint. This hook can also respond to the size of the window.
⚛️ React Responsive Values (Combine with themes from UI Libs, such as MUI, Chakra UI, etc)\
🐳 Full TypeScript Support!\
🤠 Arbitrary Breakpoints!\
⚡ Optimized Performance!
``sh
$ yarn add @resval/react-responsive-values
$ npm i @resval/react-responsive-values
`
`jsx
import { createResponsiveValues } from '@resval/react-responsive-values'
const useVx = createResponsiveValues({
breakpoints: {
base: '0px',
xs: '320px',
sm: '576px',
md: '768px',
lg: '1080px',
xl: '1280px',
},
media: 'min',
})
const useResval = () => {
return useVx({
fontSize: {
base: '12px',
md: '24px',
},
color: {
base: 'red',
'600px': 'blue',
lg: 'black',
},
isMobileView: {
base: true,
md: false,
},
})
}
export function Component() {
const { fontSize, color } = useResval()
return (
export default function About() {
const { isMobileView } = useResval()
return isMobileView ?
- Better abstraction in v1.0 - Read More
- Rendering optimization in v1.0 - Read More