how would I be able to use the latest version of mantine? instead of version 5

Currently refine uses mantine v5, but I want to use mantine v7, how can I do this?

8 Replies

Hi @blackbearftw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine currently supports Mantine v5 and does not officially support Mantine v7 yet. This is mentioned in the Github issue (https://github.com/refinedev/refine/issues/5178) and the Refine documentation (https://refine.dev/docs/ui-integrations/mantine/introduction). However, the Refine team is open to contributions if someone wants to take on the task of adding support for Mantine v7, as mentioned in the Github issue. For now, you can continue using Mantine v5 with Refine by following the installation instructions provided in the Refine documentation (https://refine.dev/docs/ui-integrations/mantine/introduction). Here's the command for installing the necessary packages:

pnpm add @refinedev/mantine @refinedev/react-table @mantine/core@5 @mantine/hooks@5 @mantine/form@5 @mantine/notifications@5 @emotion/react@11 @tabler/icons@1 @tanstack/react-table

pnpm add @refinedev/mantine @refinedev/react-table @mantine/core@5 @mantine/hooks@5 @mantine/form@5 @mantine/notifications@5 @emotion/react@11 @tabler/icons@1 @tanstack/react-table

yarn add @refinedev/mantine @refinedev/react-table @mantine/core@5 @mantine/hooks@5 @mantine/form@5 @mantine/notifications@5 @emotion/react@11 @tabler/icons@1 @tanstack/react-table

yarn add @refinedev/mantine @refinedev/react-table @mantine/core@5 @mantine/hooks@5 @mantine/form@5 @mantine/notifications@5 @emotion/react@11 @tabler/icons@1 @tanstack/react-table

If you want to use Mantine v7, you might need to manually adjust and test your application to ensure compatibility, as there might be breaking changes between v5 and v7. Please note that this is not officially recommended or supported by the Refine team. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

rival-black•8mo ago

@kapa.ai I want to use their file dropzone package to allow file uploads

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can use the Dropzone component from Mantine for file uploads in your Refine application. Here's an example of how you can use it:

import { useState } from "react";  
import axios from "axios";  
import { Edit, useForm } from "@refinedev/mantine";  
import { Text } from "@mantine/core";  
import { Dropzone, IMAGE_MIME_TYPE, FileWithPath } from "@mantine/dropzone";  

const API_URL = "<http://localhost:1337";>  
const TOKEN_KEY = "strapi-jwt-token";  

export const PostEdit: React.FC = () => {  
 const [isUploadLoading, setIsUploadLoading] = useState(false);  

 const { saveButtonProps, setFieldValue } = useForm<any>({  
 initialValues: {  
 title: "",  
 cover: "",  
 },  
 });  

 const handleOnDrop = async (files: FileWithPath[]) => {  
 try {  
 setIsUploadLoading(true);  

 const formData = new FormData();  

 const file = files[0];  

 formData.append("files", file);  

 const res = await axios.post(`${API_URL}/api/upload`, formData, {  
 headers: {  
 Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,  
 },  
 });  

 setFieldValue("cover", res.data[0].id);  

 setIsUploadLoading(false);  
 } catch (error) {  
 setIsUploadLoading(false);  
 }  
 };  

 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <form>  
 <Text mt={8} weight={500} size="sm" color="#212529">  
 Cover  
 </Text>  
 <Dropzone accept={IMAGE_MIME_TYPE} onDrop={handleOnDrop} loading={isUploadLoading}>  
 <Text align="center">Drop images here</Text>  
 </Dropzone>  
 </form>  
 </Edit>  
 );  
};

import { useState } from "react";  
import axios from "axios";  
import { Edit, useForm } from "@refinedev/mantine";  
import { Text } from "@mantine/core";  
import { Dropzone, IMAGE_MIME_TYPE, FileWithPath } from "@mantine/dropzone";  

const API_URL = "<http://localhost:1337";>  
const TOKEN_KEY = "strapi-jwt-token";  

export const PostEdit: React.FC = () => {  
 const [isUploadLoading, setIsUploadLoading] = useState(false);  

 const { saveButtonProps, setFieldValue } = useForm<any>({  
 initialValues: {  
 title: "",  
 cover: "",  
 },  
 });  

 const handleOnDrop = async (files: FileWithPath[]) => {  
 try {  
 setIsUploadLoading(true);  

 const formData = new FormData();  

 const file = files[0];  

 formData.append("files", file);  

 const res = await axios.post(`${API_URL}/api/upload`, formData, {  
 headers: {  
 Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,  
 },  
 });  

 setFieldValue("cover", res.data[0].id);  

 setIsUploadLoading(false);  
 } catch (error) {  
 setIsUploadLoading(false);  
 }  
 };  

 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <form>  
 <Text mt={8} weight={500} size="sm" color="#212529">  
 Cover  
 </Text>  
 <Dropzone accept={IMAGE_MIME_TYPE} onDrop={handleOnDrop} loading={isUploadLoading}>  
 <Text align="center">Drop images here</Text>  
 </Dropzone>  
 </form>  
 </Edit>  
 );  
};

In this example, the Dropzone component is used to create a drop area for image files. When a file is dropped into this area, the handleOnDrop function is triggered. This function creates a new FormData object, appends the dropped file to it, and then sends a POST request to the /api/upload endpoint to upload the file. The setFieldValue function is then used to update the value of the cover field with the ID of the uploaded file. Please note that you need to replace the API_URL and TOKEN_KEY with your actual API endpoint and authentication token. Also, ensure that your API endpoint supports multipart file uploads. This code is extracted from the Refine documentation (https://refine.dev/docs/packages/data-providers/strapi-v4#file-upload). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

rival-black•8mo ago

Last question for now, since my app is kind of multi-tenant (users who work in groups/teams) and requires some settings page per team (refine won't show that there are multiple teams) how would I add that page and still be coherent with the rest of the application. Keep in mind I want to show the refine sidebar and stuff @kapa.ai

absent-sapphire•3mo ago

@BlackBearFTW did you manage to upgrade to latest version of mantine?

rival-black•3mo ago

No I switched over to antd design I guess you could use mantine, just install headless refine And then use mantine elements