Localization and Internationalization (i18n)

MagicBell is available in 3 languages out of the box: English, Spanish and Brazilian Portuguese. English (en) is the default one. However, you can also translate the entire UI into any language you want.

  {(props) => (
    
  )}

Keep in mind that this won't affect the messages of the notifications, only the notification inbox UI.

Localization

To change the default language, we expose the locale property. Set it to

• es for Spanish
• pt_BR for Brazilian Portuguese

import React from 'react';
import MagicBell, { FloatingNotificationInbox } from '@magicbell/magicbell-react';

export default function Notifications() {
  return (
    
      {(props) => }
    
  );
}

Internationalization (i18n)

MagicBell is ready to support any locale you need. To do it you need to set a name for the locale and the translations for default messages.

This is a list of all messages the UI uses:

For example, let's create a locale for our German users:

import React from 'react';
import MagicBell, { FloatingNotificationInbox } from '@magicbell/magicbell-react';

export default function Notifications() {
  const locale = {
    name: 'de_DE',
    translations: {
      header: {
        title: 'Benachrichtigungen',
        'mark-all-read': 'Markiere alle als gelesen',
      },
      messages: {
        'empty-inbox': 'Keine ungelesenen Benachrichtigungen',
      },
    },
  };

  return (
    
      {(props) => }
    
  );
}

As you can see, you can provide complete dictionary of definitions or a subset. If an entry is not found in your definition, MagicBell just renders the default message in English.

Overriding default messages

You can easily override default messages by setting the locale property when you render MagicBell. For example, this definition will change the default title to "My notifications":

js
const locale = {
  name: 'en',
  translations: {
    header: {
      title: 'My notifications',
    },
  },
};