Luxon VS react-i18next

Luxon (14.7k ⭐) — A library that leverages JavaScript’s Intl for speed and slimness while providing what Intl doesn’t: an immutable user-friendly API. It also supports time zones and localization.

Luxon is another date and time library written in JavaScript. Luxon works on both browsers and Node.js. The author of Luxon, Isaac Cambrion, was also a contributor to Moment.js before it became deprecated. Now, the team behind Moment.js recommends Luxon, calling it “an evolution of Moment.js.” Luxon’s documentation can even be found in GitHub pages for Moment.js.

To be honest, use a library where someone else figured out the ambiguities and accounted for the edge cases. Good starting point: https://moment.github.io/luxon/#/math

Date-fns is fine for simpler use cases but Luxon is a lot more complete, especially where it comes to time zones.

8. Luxon: Mastering Time and Timezones for Precision Data Handling

In past i used Moment, but I read that we should avoid to use it for future projects. I read someone suggested to use Datejs, but it doesn't seems to be updated, last time was 8 years ago. Currently I'm thinking to use Luxon but I someone suggest Date-fns also.

Pain

I haven't seen this before, but I currently use Luxon most of the time and it makes working with dates and times a lot less painful.

Eleventyone’s project scaffold includes: Eleventy with a skeleton site, a date format filter for Nunjucks based on Luxon, a tiny CSS pipeline with PostCSS, an equally tiny inline JS pipeline, JS search index generator, Netlify Dev for testing Netlify redirects, and a serverless (FaaS) development pipeline with Netlify Dev and Netlify Functions.

Luxon is a powerful and lightweight JavaScript library for working with dates and times. It was created as an alternative to the popular Moment.js library, with the goal of being faster, smaller, and easier to use.

If you ever wondered how luxon and native JS-Dates (with TimeZones) behave when converting them between each other and ISO-Date-Strings here are my tests:

> It’s important to be aware of what you are getting if you go with React, and what you are getting is a far cry from what a framework would offer, with all the corresponding pros and cons.

Would you like to elaborate on that?

In my experience, with something as great, size/ecosystem-wise as React, there will almost always be at least one "mainstream" package for whatever you might want to do with it, that integrates pretty well. Where a lot of things might come out of the box with a framework, with a library I often find myself just needing to install the "right" package, and from there it's pretty much the same.

For example, using https://angular.io/guide/i18n-overview or installing and using https://react.i18next.com/

Or something like https://angular.io/guide/form-validation out of the box, vs installing and using https://formik.org/

Or perhaps https://angular.io/guide/router vs https://reactrouter.com/en/main

Even adding something that's not there out of the box is pretty much the same, like https://primeng.org/ or https://primereact.org/

React will typically have more fragmentation and therefore also choice, but I don't see those two experiences as that different. Updates and version management/supply chain will inevitably be more of a mess with the library, admittedly.

Now, projects like Next https://nextjs.org/ exist and add what some might regard as the missing pieces and work well if you want something opinionated and with lots of features out of the box, but a lot of those features (like SSR) are actually pretty advanced and not always even necessary.

In a recent project I've been using react-i18next so I'll use its syntax for the examples, but pretty much every library works similarly.

react-i18next

i18next - You can find documentation and resources for using i18next at react.i18next.com. i18next is a popular internationalization framework for JavaScript, including React. It provides a comprehensive solution for handling translations, formatting, and more.

So far, we’ve been using a utility createLocalizedString to create and use the LocalizedString type. This utility is only really practical in unit tests. For real applications, we’ll want to use a translation function from react-i18next or next-i18next to do the heavy lifting. Then we just wrap the translation functions that are provided in order to use our type:

Website: https://react.i18next.com/

If you are talking about handling translations for your application, take a look at https://react.i18next.com/

I will be supporting Korean as a part of the beta. I have to look deeper into https://react.i18next.com/ in order to understand what it provides. My goal is for engineers to be able to click a single button and have localizations always up to date in their codebase, not delaying shipping a new version or having to even think about it.

With the new react-i18next version, when loading multiple namespaces, t function will infer and accept the keys for the first namespace. So this pattern is now accepted:

react-i18next