Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { memo, useMemo, type ComponentProps, type PropsWithChildren } from 'react';
import { IntlProvider } from 'react-intl';
export type ReactIntlProviderProps = PropsWithChildren<ComponentProps<typeof IntlProvider>>;
export const ReactIntlProvider = memo(function ReactIntlProvider({
defaultLocale = 'en',
defaultRichTextElements: propsDefaultRichTextElements = undefined,
...props
}: ReactIntlProviderProps) {
const defaultRichTextElements: Required<ReactIntlProviderProps>['defaultRichTextElements'] = useMemo(
() => ({
// @ts-expect-error -- The typings are wrong, and we cannot use self-closing tags with () => <br />.
br: <br />,
p: (chunk) => <p>{chunk}</p>,
ol: (chunk) => <ol>{chunk}</ol>,
ul: (chunk) => <ul>{chunk}</ul>,
li: (chunk) => <li>{chunk}</li>,
...propsDefaultRichTextElements,
}),
[propsDefaultRichTextElements],
);
return (
<IntlProvider
{...props}
defaultLocale={defaultLocale}
defaultRichTextElements={defaultRichTextElements}
/>
);
});
|