Generic model the refine way
Hello ! I have a generic model document, but it could be an order, a delivery note, and other types of documents. I have already resolved all the data fetching and views with permanent filters but i'm not able make it work with tittles and all the translation texts, is there a way to do it?
Thank you in advance!
5 Replies
Hi @.huford. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, you can manage the titles and translations in your Refine application using the
DocumentTitleHandler
component and the i18nProvider
.
The DocumentTitleHandler
component is used to set the document title for the current page. If you want to prevent Refine from setting the document title, you can simply not include this component in your application. Here is an example of how you can use it:
In this example, the DocumentTitleHandler
component is commented out, so Refine will not set the document title. source (https://discord.com/channels/837692625737613362/1138087501647593472)
For translations, Refine provides an i18nProvider
that allows you to add multiple language choices to your web application. The default language of Refine is English, but you can include and use your own translation in the project for different language preferences. You can override Refine's default texts by changing the common.json
files. All of Refine's components support i18n, meaning that if you want to change their text, you can create your own translation files with the reference to the keys above. source (https://refine.dev/docs/api-reference/core/providers/i18n-provider/)
Here is an example of how you can use the i18nProvider
:
This will allow you to put translation features to the following hooks:
- useTranslate
shows translation between different languages.
- useSetLocale
changes locale at runtime.
- useGetLocale
getting the current locale. source (https://discord.com/channels/837692625737613362/1138087501647593472)
For more detailed information on using Refine, you can refer to the official documentation (https://refine.dev/docs).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@211190517243969538> kapa.ai is still learning and improving, please let us know how it did by reacting below
rich-copper•8mo ago
@kapa.ai how to create a custom i18nProvider
Let me check the knowledge base for you. One moment! :books:
----------------------
Creating a custom
i18nProvider
in Refine involves defining a JavaScript object that adheres to the I18nProvider
type. This object should include three methods: translate
, changeLocale
, and getLocale
.
Here's the basic structure of an i18nProvider
:
- translate
is a function that takes a translation key, options, and a default message as arguments, and returns a translated string.
- changeLocale
is a function that takes a language string and options as arguments, and returns a Promise. This function is used to change the current locale.
- getLocale
is a function that returns the current locale as a string.
After creating your i18nProvider
, you can pass it to the <Refine />
component in your application:
This will allow you to use translation features in your application with the useTranslate
, useSetLocale
, and useGetLocale
hooks.
For more detailed information, you can refer to the i18nProvider documentation (https://refine.dev/docs/i18n/i18n-provider/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@835960138347053057> kapa.ai is still learning and improving, please let us know how it did by reacting below