Merge pull request #18 from transifex/react_T_params

Reintroduce support for ICU parameters
transifex · Aug 27, 2020 · 06deac8 · 06deac8
2 parents a149705 + a676ab5
commit 06deac8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/react/src/components/T.jsx b/packages/react/src/components/T.jsx
@@ -4,18 +4,21 @@ import {
   t, onEvent, offEvent, LOCALE_CHANGED,
 } from '@transifex/native';
 
-function T({ _str, _html, _inline }) {
+function T({
+  _str, _html, _inline, ...props
+}) {
   const [translation, setTranslation] = useState('');
 
   useEffect(() => {
     function render() {
       if (!_html) {
-        setTranslation(t(_str, { _html, _inline }));
+        setTranslation(t(_str, { _html, _inline, ...props }));
       } else {
         const result = t(_str, {
           _html,
           _inline,
           _escapeVars: true,
+          ...props,
         });
         const parentProps = { dangerouslySetInnerHTML: { __html: result } };
         const parent = _inline ? 'span' : 'div';

diff --git a/packages/react/tests/T.test.jsx b/packages/react/tests/T.test.jsx
@@ -14,6 +14,12 @@ describe('T', () => {
     expect(screen.queryByText(message)).toBeInTheDocument();
   });
 
+  it('renders text with param', () => {
+    const message = 'Hello <b>{username}</b>';
+    render(<T _str={message} username="JohnDoe" />);
+    expect(screen.queryByText('Hello <b>JohnDoe</b>')).toBeInTheDocument();
+  });
+
   it('renders HTML', () => {
     const message = 'Hello <b>Unsafe HTML</b>';
     render(<T _str={message} _html />);