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: 22 days 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 (8 months ago)
• Default Branch: main
• Last Pushed: 2024-06-04T02:51:42.000Z (8 months ago)
• Last Synced: 2025-01-11T14:47:18.952Z (27 days 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.