uttalat

Text message management

Usage no npm install needed!

<script type="module">
  import uttalat from 'https://cdn.skypack.dev/uttalat';
</script>

README

uttalat

Utility to manage text messages in an application

Bundles

A text bundle is a regular js object. It can have nested properties.

const bundle = {
    headline: 'Hello World!',
    error: {
        greetingUnknown: 'No greeting found',
        remoteError: 'Could not load hello world'
    }
};

Add bundles to uttalat.

import uttalat from 'uttalat';

const m = uttalat();

m.addBundle(bundle);

The text messages can be retrieved using dot notation.

import uttalat from 'uttalat';

const m = uttalat();

function HelloWorld({errorMessage}) {
    return (
        <div>
            <h1>{m('headline')}</h1>

            {errorMessage ?
                <div>{m(`error.${errorMessage}`, 'error.remoteError')}</div>
                : null
            }
        </div>
    );
}

Replace variables in message

A variable can be substituted in a text message by prefixing a colon :.

const bundle = {
    greet: ':greeting World!'
}

m.addBundle(bundle);

const message = m('greet', {greeting: 'Hello'}); // "Hello World!"

Api

uttalat(key, fallbackKey1, ..., fallbackKeyN, args)

get text message

  • key [string]: key to look for.
  • fallbackKey{1..n} [string]: if key before is not found, check the next.
  • args [object]: replace variables in text message with values in args.
  • returns: [string] the text message found or key if not found.

uttalat.addBundle(bundle, override)

adds a new bundle with text messages

  • bundle [object]: any object with text messages
  • override: optionally specify if the added bundle should override previous bundles

uttalat.getHtmlMessage(key, fallbackKey1, ..., fallbackKeyN, args)

get text message for use in react dangerouslySetInnerHTML

Returns the text message wrapped in {__html: '...'};