Links
Comment on page

Custom component internationalization

AdminJS can be used in multiple languages as described in this tutorial. Creating an international version of our custom components is also possible.
Assume we have created a custom React component as described here. We can utilize a generic AdminJS hook called useTranslations.
// ...
import { useTranslations } from "adminjs"
// ...
const CustomComponent = (props) => {
const {translateComponent} = useTranslations()
return <div> {translateComponent('CustomComponent.textToTranslate')} </div>
}
We should also add translations to the component's namespace in our locale config to make this work.
const options = {
// ...
locale: {
translations: {
en: {
components: {
CustomComponent: {
textToTranslate: 'This is text to translate'
}
}
}
}
}
// ...
}
If we would like to create custom messages to be handled by useNotice hook we have to add our component section to the messages namespace.
const options = {
// ...
locale: {
translations: {
en: {
messages: {
CustomComponent: {
componentMessage: 'This is a message from a custom component'
}
}
}
}
}
// ...
}
Usage:
import { useNotice } from "adminjs"
// ...
const sendNotice = useNotice()
// ...
sendNotice({
message: 'CustomComponent.componentMessage',
type: 'error',
})