@postinumero/formatjs-helpers

Components

$3

``tsx
import { FormattedDateTime } from "@postinumero/formatjs-helpers";

const date = new Date();

; // 6/14/2025, 3:00 PM
`

$3

Renders a translated message from a given message map using its key. If the key is not found in the messages, the key itself is displayed as a fallback.

`tsx
import { FormattedMessageValue } from "@postinumero/formatjs-helpers";
import { defineMessages } from "react-intl";

const optionMessages = defineMessages({
foo: { defaultMessage: "Foo" },
bar: { defaultMessage: "Bar" },
});
const value = "foo";

; // Foo
`

Hooks

$3

`tsx
import { useFormatDateTime } from "@postinumero/formatjs-helpers";

const date = new Date();

const formatDateTime = useFormatDateTime();
formatDateTime(date); // 6/14/2025, 3:00 PM
`

$3

Returns a translated message from a given message map using its key. If the key is not found in the messages, the key itself is displayed as a fallback.

`tsx
import { useFormatMessageValue } from "@postinumero/formatjs-helpers";
import { defineMessages } from "react-intl";

const optionMessages = defineMessages({
foo: { defaultMessage: "Foo" },
bar: { defaultMessage: "Bar" },
});
const value = "foo";

const formatMessageValue = useFormatMessageValue();
formatMessageValue(optionMessages, value); // Foo
`

$3

Workaround to prevent message id values ​​from being used in the generated index.html file when using SPA mode in production.

`ts
import { useFormatMessageNoFallbackOnMissingString } from "@postinumero/formatjs-helpers";
import { defineMessage } from "react-intl";

const title = useFormatMessageNoFallbackOnMissingString(
defineMessage({
defaultMessage: "Example",
}),
);
`

Other

$3

Convert a byte value into a more human-readable format using appropriate units (byte, kilobyte, megabyte, etc.).

`ts
import { formatNumberBytesArgs } from "@postinumero/formatjs-helpers";

intl.formatNumber(
...formatNumberBytesArgs(4700, {
notation: "compact",
style: "unit",
}),
); // 4.6 kB
``