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.

Preview


  {(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:

Key	Default value (en)
`header.title`	NOTIFICATIONS
`header.mark-all-read`	Mark All Read
`notification.mark-as-read`	Mark as read
`notification.mark-as-unread`	Mark as unread
`notification.delete`	Delete
`web-push-notifications.notice`	By enabling browser notifications, you’ll stay up to date even better.
`web-push-notifications.enable-now`	Enable Now
`messages.empty-inbox`	All clear!<br>We'll let you know when there's more.	Supports HTML
`messages.server-error`	"We can’t seem to retrieve your notifications.<br>Please check back soon.	Supports HTML
`messages.no-internet-connection`	Hmm, we’re unable to connect to the internet.<br>Please check your connection.	Supports HTML

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',
    },
  },
};