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:
or
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:
----------------------
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black•9mo ago
@kapa.ai I want to use their file dropzone package to allow file uploads
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:
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:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black•9mo 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
conscious-sapphire•5mo ago
@BlackBearFTW did you manage to upgrade to latest version of mantine?
xenial-black•5mo ago
No
I switched over to antd design
I guess you could use mantine, just install headless refine
And then use mantine elements