donedeal0 / talkr Goto Github PK

Talkr is the lightest i18n provider for React applications. It supports Typescript, provides autocompletion, has 0 dependencies, and is very easy to use.

Home Page: https://talkr-documentation.netlify.app/

JavaScript 5.26% TypeScript 94.74%

i18n react reactjs react-context translation translations

talkr's Introduction

Hi,

I'm a frontend engineer based in Paris. I use React and Typescript on a daily basis. I also have a good knowledge of Node.js as well as Rust basics.

I can't share my professional work here but here are a few side projects I've done.

	Superdiff (434★) Fastest object and array diff library on the javascript market. No dependencies, readable diff, supports deeply nested keys. It has received github stars from engineers at Linkedin, AWS, Alibaba, Shopify, etc. Code
	Talkr (247★) Tiniest i18n library for React on the market (less than 1kb). Supports Typescript, live autocompletion, complex plural rules, deeply nested keys. Code Documentation
	Paris Legends Map A mobile application with over 400 addresses of historical figures in Paris. Geolocate yourself and set out to meet history. Available in English and French. Website
	Flickstats A desktop software to analyze your screenplays. Get decisive data about your story, scenes and characters. All wrapped up in beautiful visualizations. Website
	Search app for deceased persons This app allows you to search for people who died in France since 1970. Interactive map with data clusters. Code Website
	Alright React App (142★) Professional React app generator. Comes with an exposed, unopinionated, high performance configuration. Jest, SWC, Storybook, Typescript 5, Webpack 5. Code

talkr's People

Contributors

Stargazers

Watchers

Forkers

kevincarrogan lib-design gshilin ablankenship10 qiuyaya component-design houzch pointsingularity enthusiva dolie

talkr's Issues

The hook should also expose the `tr` function for the current context.

First of all, great library! I particularly like the lack of dependencies and total size.

I have a small feature request. The talkr package exposes a handy trfunction for producing a string rather than a component, but using it is inconvenient because you need to pass the values from useT for every call.

Is it possible to also expose tr from useT as well, and then automatically fill in the arguments (locale, languages, and defaultLanguage) using the current context?

My use case is validation using yup and zod. Their APIs require string-based errors, and I need that to happen at validation time rather than render time. Many errors have parameters as well, so it's impossible to just propagate the translation key.

Feature: Autocomplete json file keys

We talked briefly about implementing such feature in reddit chat, I'd be interested in taking a crack at this this weekend if you may have some guidance on how to accomplish this. Not quite sure if this is doable within the library itself via typescript or if you meant implementing like a VS Code extension or something.

If you know of a way this would be possible and can share some documentation on it I'll give it a go when I have some freetime.

In SSR navigator is not defined

Translation helper for talkr

I've created a small helper utility to ease the process of adding translations for talkr which I think it is useful:

I am using talkr's T function through custom wrapper hook, useTranslation. In this hook I can choose to render original content of the talkr's hook - T(key) or I can render the clickable react component that prompts user to enter the translation. This translation object is set in the singleton which is copied on each translation to the clipboard, as formatted JSON so you can paste it in the file. Also it detects missing translations and puts them in the object so you can see immediately '*** missing ***' on the screen. It doesn't work for plurals or objects, only for strings.

Also it fires notifications in console if translation is missing (or same as in default locale):

here is the gist:
https://gist.github.com/rvision/374faee770723d41f5cc376f03c953d5

React has detected a change in the order of Hooks

It happens to me on a conditionally displayed translation for example, when the condition goes from false to true

condition && <Component label={T("translationKey")} />

What I did to fix it is to declare it before using it but i prefer doing it like I showed before
const translation = T("translationKey")
condition && <Component label={translation} />

detectBrowserLanguage is assigning not supported values

Hi! great library.

Just to let you know that when detectBrowserLanguage is used is assigns the browser's language even though is not included by the provided list of languages.

Any chance of supporting arrays in translation files?

{
	"name": "English",
	"weekdays": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
}

const weekdays = T('weekdays');
console.log(weekdays);        // returns null

warning as an option

hi, I'm currently forced to disable the warning before calling T, and restoring every time, like this

    const bak = console.warn
    console.warn = () => {}

Could you make the warning optional, please?

If you wonder why i'm doing it, it's for 2 reasons

I'm applying a logic where different keys are attempted for the same text
I want a different warning message

Hooks order

I am using talkr in the first bigger project and I find this very limitating: #9

If you have rendering conditions, validations, notifications - the order of hooks forces you to get translated text into constants, which makes component code a mess very easily. This makes it almost useless. It also doesn't work in redux-saga, but fortunately I am not using it in this project.

I've tried to wrap it into some reusable function, but that is not possible either.

Why this T can't be a function depending on hook reused everywhere? Something like const T = useT();

setLocale doesn't trigger change

How to detect change of selected language and change the attribute of html element with react-helmet?
Given this structure:
`import { Talkr, useLocale } from 'talkr';
const App = () => {
const { locale } = useLocale();
console.log(locale);

return (
	<>
		<Helmet>
			<body className="theme1" />
                            <html lang={locale} />
			<title>Hello</title>
		</Helmet>
		<Talkr languages={{ en, fr, es }} defaultLanguage="en" detectBrowserLanguage>
                        <Page with language switcher that does setLocale />
                    </Talkr>
        </>
);

};

export default App;`

locale change is never catch and App is never re-rendered. If I move below Talkr, same result.

Missing translations warning

There should be some kind of handling missing translations. Either console.warn or something similar. This would be helpful to catch missing translations, especially if there are bunch of languages in the system and translators are translating independently.

Example:

console.log(t('hello12')); // returns null

Btw, fantastic project, I've set it up and running in 15 minutes!

donedeal0 / talkr Goto Github PK

talkr's Introduction

Superdiff (434★)

Talkr (247★)

Paris Legends Map

Flickstats

Search app for deceased persons

Alright React App (142★)

talkr's People

Contributors

Stargazers

Watchers

Forkers

talkr's Issues

Recommend Projects

Recommend Topics

Recommend Org