1.0.0-beta • Published 1 year ago
@resval/react-responsive-values v1.0.0-beta
Resval
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.
Why?
⚛️ React Responsive Values (Combine with themes from UI Libs, such as MUI, Chakra UI, etc)\ 🐳 Full TypeScript Support!\ 🤠 Arbitrary Breakpoints!\ ⚡ Optimized Performance!
Installation
$ yarn add @resval/react-responsive-values
# or
$ npm i @resval/react-responsive-values
Documentation
Quick Start
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 (
<div>
<h1 style={{ fontSize, color }}>Hello World!</h1>
</div>
)
}
export default function About() {
const { isMobileView } = useResval()
return isMobileView ? <h3>Mobile View</h3> : <h1>Desktop View</h1>
}
Contributing
Story
1.0.0-beta
1 year ago
0.1.0
2 years ago
0.0.14-beta
2 years ago
0.0.13-beta
2 years ago
0.0.12-beta
2 years ago
0.0.11-beta
2 years ago
0.0.10-beta
2 years ago
0.0.9-beta
2 years ago
0.0.8-beta
2 years ago
0.0.7-beta
2 years ago
0.0.6-beta
2 years ago
0.0.5-beta
2 years ago
0.0.4-beta
2 years ago
0.0.3-beta
2 years ago
0.0.2-beta
2 years ago
0.0.1-beta
2 years ago