https://github.com/knowsuchagency/mantine-responsive-values
Simplifying responsive design with Mantine
https://github.com/knowsuchagency/mantine-responsive-values
design mantine react web
Last synced: about 2 months ago
JSON representation
Simplifying responsive design with Mantine
- Host: GitHub
- URL: https://github.com/knowsuchagency/mantine-responsive-values
- Owner: knowsuchagency
- Created: 2024-06-03T23:49:52.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-04T02:51:42.000Z (about 2 years ago)
- Last Synced: 2026-01-18T22:33:03.727Z (5 months ago)
- Topics: design, mantine, react, web
- Language: TypeScript
- Homepage: https://jsr.io/@knowsuchagency/mantine-responsive-values
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mantine Responsive Values
A simple utility hook for applying responsive values to component props based on breakpoints defined in the Mantine theme.
## Installation
```bash
npx jsr add @knowsuchagency/mantine-responsive-values
```
## Usage
```tsx
import { MantineProvider, Box, Text, Title, Button } from "@mantine/core";
import { useResponsive as responsive } from "@knowsuchagency/mantine-responsive-values";
function HeroSection() {
return (
Welcome to Our App
Discover a new way to manage your tasks and boost your productivity.
Get Started
);
}
```
### Parameters
- `defaultValue`: The default value to use if no breakpoints match.
- `values`: An object containing the values for different breakpoints. The keys should match the breakpoint names defined in the Mantine theme.
## License
This project is licensed under the MIT License.