Link Search Menu Expand Document

useLocales() function

A custom React hook providing the current locales as an array of string identifiers, with earlier entries taking precedence over latter ones. Undefined locales are identified by an empty string ''.

Signature:

export declare function useLocales(): string[];

Returns:

string[]

Example 1

import React from 'react'
import { MessageProvider, useLocales } from '@messageformat/react'

<MessageProvider locale="en" messages={ { foo: 'FOO' } }>
  {() => useLocales().join(',') // 'en'
  }
  <MessageProvider locale="fi" messages={ { foo: 'FÖÖ' } }>
    {() => useLocales().join(',') // 'fi,en'
    }
  </MessageProvider>
</MessageProvider>

Example 2

import React, { Component } from 'react'
import { MessageContext, MessageProvider, useLocales } from '@messageformat/react'

// Within a class component, locales are available via the context object
class Foo extends Component {
  static contextType = MessageContext
  declare context: React.ContextType<typeof MessageContext> // TS
  render() {
    const { locales } = this.context
    return locales.join(',')
  }
}