Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Dict component #1

Open
markusjwetzel opened this issue Apr 5, 2019 · 0 comments
Open

Add Dict component #1

markusjwetzel opened this issue Apr 5, 2019 · 0 comments

Comments

@markusjwetzel
Copy link
Contributor

markusjwetzel commented Apr 5, 2019

Let's assume we have defined the following dictionary dict:

const dict = createDict({
  hello: 'Hello {count}',
});

Currently we access a dictionary entry like this:

<Trans {...dict('hello', { count })} />

The downside of this approach is that function calls (at least those who do not create a JSX element) invalidates Flow type refinements: https://flow.org/en/docs/lang/refinements/#toc-refinement-invalidations

Because of that it might be an improvement to use a Dict function instead. Also you can say that this would be more a React like approach, because we use pure JSX.

import React from 'react';
import { createDict } from 'intlized-components';

const Dict = createDict({
  hello: 'Hello {count}',
});

function Component() {
  return <Dict name="hello" values={{ count }} />;
}

Without values the new syntax would also be a little bit shorter:

<Dict name="hello" />
{/* vs. */}
<Trans {...dict('hello')} />
@markusjwetzel markusjwetzel changed the title Add useIntl hook Add useDict hook Dec 20, 2022
@markusjwetzel markusjwetzel changed the title Add useDict hook Add Dict component Dec 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant