LogoLogo
Join our community
  • AdminJS
  • Contribute
  • Demo
  • Addons Marketplace
  • Installation
    • Getting started
    • Plugins
      • Adonis
      • Express
      • Nest
      • Fastify
      • Hapi
      • Koa
      • Community Plugins
        • FeathersJS
        • AdonisJS
      • Matrix
    • Adapters
      • TypeORM
      • Sequelize
      • Prisma
      • MikroORM
      • Objection
      • SQL
      • Mongoose
      • Community Adapters
        • AdonisJS
    • What's new in v7?
    • Migration Guide v7
  • Basics
    • Resource
    • Action
    • Property
    • Features
      • Relations
      • Upload
      • Logger
      • Import & Export
      • Password
      • Leaflet Maps
      • Writing your own features
    • API
      • List
      • New
      • Search
      • Show
      • Edit
      • Delete
      • Bulk Delete
    • Themes
    • Authentication
      • FirebaseAuthProvider
      • MatrixAuthProvider
  • How to write an addon?
  • UI Customization
    • Writing your own Components
    • Overwriting CSS styles
    • Dashboard customization
    • Changing the form view
    • Storybook
  • Tutorials
    • Role-Based Access Control
    • Internationalization (i18n)
    • Content Management System
    • Custom components library
    • Custom component internationalization
  • FAQ
    • PDF Generator
    • Charts
    • Forgot Password
  • ⚠️Legacy documentation
Powered by GitBook
On this page
  1. Tutorials

Custom component internationalization

PreviousCustom components libraryNextPDF Generator

Last updated 2 years ago

AdminJS can be used in multiple languages as described in this . Creating an international version of our custom components is also possible.

Assume we have created a custom React component as described . 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',
})

tutorial
here