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.

Sign up for GitHub

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

Jump to bottom

Expose i18n data in DocumentContext #18667

Closed
IskanderMustafin opened this issue Nov 2, 2020 · 5 comments
Closed

Expose i18n data in DocumentContext #18667

IskanderMustafin opened this issue Nov 2, 2020 · 5 comments
Milestone
backlog

Comments

@IskanderMustafin
Copy link

IskanderMustafin commented Nov 2, 2020 •
edited
Loading

Feature request

I'm creating this feature request in continuation of this discussion for easier tracking and in order not to forget.

Right now I18n feature automatically adds lang attribute to the <html> tag.
It's cool but there more cases when current locale can be handy in DocumentContext.

In discussion mentioned above people have different reasons why they need it, but in my concrete case I need to do following:

  • detect if it's RTL or LTR direction based on current locale. And add it as dir attribute to the <html> tag;
  • include Intl polyfill for current locale:
 const polyfill = `https://cdn.polyfill.io/v3/polyfill.min.js?features=Intl.~locale.${locale}`;
...
<script src={polyfill} />

As fow now I'm using a bit hacky and less idiomatic way of setting direction in _app.tsx:

const langDir = getLangdirByLocale(locale);
...
<div dir={langDir}>
    <Component {...pageProps} />
</div>

Describe the solution you'd like

Please provide locale, defaultLocale and locales properties in DocumentContext. I.e. in same way as it done in GetServerSidePropsContext and GetStaticPropsContext.
@Timer Timer added this to the backlog milestone Nov 2, 2020
@dmitrykozyrenko
Copy link

@IskanderMustafin current locale already available as prop in document, check this.props

@IskanderMustafin
Copy link
Author

@dmitrykozyrenko thanks a lot, it works!

@santialbo
Copy link

I would like to #18329 as a reference for more examples.

Would you consider reviewing a PR adding locale, locales and defaultLocale to the NextPageContext type?

@laithyounes-archive laithyounes-archive mentioned this issue Mar 5, 2021
Merged
kodiakhq bot pushed a commit that referenced this issue Mar 8, 2021
@laithyounes-archive
Add RTL to with-next-translate example (#22808)
3f9c469 
### Arabic/Hebrew RTL to `with-next-translate` Example
Added a simple example to change HTML direction based on the currently selected language

### References: 
- [#19049](#19049)
- [#18667](#18667)
@ijjk
Copy link
Member

ijjk commented Sep 21, 2021

Closing as this was updated in #21930 which is available in the latest version of Next.js v11.1.2, please update and give it a try!

@ijjk ijjk closed this as completed Sep 21, 2021
@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
backlog
Development

No branches or pull requests
6 participants
@Timer @santialbo @IskanderMustafin @balazsorban44 @ijjk @dmitrykozyrenko