Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ibitcy/eo-locale
🌏Internationalize React apps 👔Elegant lightweight library based on Internationalization API
https://github.com/ibitcy/eo-locale
globalization hacktoberfest i18n i18next icu internationalization intl localization messageformat preact react react-components react-hooks react-intl reactjs reactjs-components tiny translation
Last synced: 6 days ago
JSON representation
🌏Internationalize React apps 👔Elegant lightweight library based on Internationalization API
- Host: GitHub
- URL: https://github.com/ibitcy/eo-locale
- Owner: ibitcy
- License: mit
- Created: 2018-05-10T13:59:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-12-10T20:29:42.000Z (about 2 months ago)
- Last Synced: 2025-01-12T21:00:12.535Z (13 days ago)
- Topics: globalization, hacktoberfest, i18n, i18next, icu, internationalization, intl, localization, messageformat, preact, react, react-components, react-hooks, react-intl, reactjs, reactjs-components, tiny, translation
- Language: TypeScript
- Homepage: https://eo-locale.netlify.app/
- Size: 9.11 MB
- Stars: 348
- Watchers: 9
- Forks: 12
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - eo-locale - 🌏Internationalize React and Preact apps 👔Elegant lightweight(2kB) library based on Internationalization API (TypeScript)
- awesome-tiny-js - eo-locale - Interpolation and dates / numbers, <img align="top" height="24" src="./img/eo-localecore.svg">, or <img align="top" height="24" src="./img/eo-localereact.svg"> with react bindings. (I18N / Reactive Programming)
README
[](https://travis-ci.org/ibitcy/eo-locale)
[](https://www.npmjs.com/package/@eo-locale/core)
* 💪Runs in all browsers and Node.js
* ☎Can be used not only in React.Component but also in Vanilla JS
* 📦Really tiny size. Calculated by [size-limit](https://github.com/ai/size-limit) and [bundlephopia](https://bundlephobia.com/result?p=eo-locale@latest).
* 📚Message format is strictly implemented by [ICU standards](http://userguide.icu-project.org/formatparse/messages)
* 🎓Support for 150+ languages
* 🎉Support HTML in message. Support React Elements as variables
* 🎢Locale data in [nested JSON format](https://github.com/ibitcy/eo-locale/releases/tag/7.4.0) are supported
* 👫Simple. Only four components and one hook
* ⚙️TypeScript and Flow types out of the box. Library has written on TypeScript
* 🎄Optimized for [tree shaking](https://webpack.js.org/guides/tree-shaking/)
# [Official website](https://eo-locale.netlify.app/)
# Motivation
Internationalization is the process of adapting an application to work with different languages and regions. That can bring some benefits. Your target group can be broader than the one with the default language of the app. So by internationalizing an app, you may reach a bigger audience.
> Internationalization it's not only about translation text. Users expect localized Dates, Number separators, Currencies.
# Compare with most popular libraries
Today each dependency drags more dependencies and increases your project’s bundle size uncontrollably. But size is very important for everything that intends to work in a browser.
**eo-locale** is a simple library for those who care about their bundle size and client-side performance. It is fast and lightweight because:
- built with hooks and functional components only (no classes and polyfills for them);
- ships only a minimal amount of manually optimized algorithms;
To show you the problem that **eo-locale** is trying to solve, we have performed a simple benchmark (using [bundlephobia.com](https://bundlephobia.com)) against popular React localization libraries:
| Name | Bundle size | Bundle size (gzip)|
| ---- | ----------- | ----------------- |
| **eo-locale** | [](https://bundlephobia.com/result?p=@eo-locale/react@latest) | [](https://bundlephobia.com/result?p=@eo-locale/react@latest) |
| react-intl | [](https://bundlephobia.com/result?p=react-intl) | [](https://bundlephobia.com/result?p=react-intl) |
| react-i18next | [](https://bundlephobia.com/result?p=react-i18next) | [](https://bundlephobia.com/result?p=react-i18next) |
| react-intl-universal | [](https://bundlephobia.com/result?p=react-intl-universal) | [](https://bundlephobia.com/result?p=react-intl-universal) |
| @lingui/react | [](https://bundlephobia.com/result?p=@lingui/react) | [](https://bundlephobia.com/result?p=@lingui/react) |
# Projects using eo-locale
- [gambit.gg](https://gambit.gg/) — Gambit Esports website by [lessmess](https://lessmess.agency/)