Company
Date Published
Author
Vivek Kumar Bansal
Word count
1800
Language
English
Hacker News points
None

Summary

Harness developed a custom solution for string externalization in React applications to meet specific needs, such as ease of updates for documentation teams, templating support, developer-friendly APIs, validation, and autocomplete, which existing packages like react-intl and react-i18next did not fully address. The in-house approach utilizes YAML for string storage, mustache.js for templating due to its small size and security features, and TypeScript for validation and autocomplete, with React's Context API ensuring the strings are accessible throughout the application. The solution includes a custom hook, `useLocaleStrings`, to fetch strings, and supports nested objects using lodash functions. The integration of mustache.js allows for template-based string rendering, and the setup is further enhanced by leveraging TypeScript for static analysis, which will be explored in a forthcoming sequel to this exploration. All the code for this implementation is available on GitHub.