Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/wojtekmaj/react-t. Simple translation module for React applications.
Something went wrong. Try again.
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122import React, { useRef } from 'react';import PropTypes from 'prop-types';
type LocaleOptionsProps = { locale: string | undefined; setLocale: (locale: string | undefined) => void;};
export default function LocaleOptions({ locale, setLocale }: LocaleOptionsProps) { const customLocale = useRef<HTMLInputElement>(null);
function onChange(event: React.ChangeEvent<HTMLInputElement>) { const { value: nextLocale } = event.target;
if (nextLocale === 'undefined') { setLocale(undefined); } else { setLocale(nextLocale); } }
function onCustomChange(event: React.FormEvent<HTMLFormElement>) { event.preventDefault();
const input = customLocale.current; const { value: nextLocale } = input as HTMLInputElement;
setLocale(nextLocale); }
function resetLocale() { setLocale(undefined); }
return ( <fieldset> <legend>Locale</legend>
<div> <input checked={locale === undefined} id="localeDefault" name="locale" onChange={onChange} type="radio" value="undefined" /> <label htmlFor="localeDefault">Auto</label> </div> <div> <input checked={locale === 'en'} id="localeEn" name="locale" onChange={onChange} type="radio" value="en" /> <label htmlFor="localeEn">en (default)</label> </div> <div> <input checked={locale === 'de'} id="localeDe" name="locale" onChange={onChange} type="radio" value="de" /> <label htmlFor="localeDe">de</label> </div> <div> <input checked={locale === 'es'} id="localeEs" name="locale" onChange={onChange} type="radio" value="es" /> <label htmlFor="localeEs">es</label> </div> <div> <input checked={locale === 'pl'} id="localePl" name="locale" onChange={onChange} type="radio" value="pl" /> <label htmlFor="localePl">pl (not supported)</label> </div> <form onSubmit={onCustomChange}> <label htmlFor="customLocale">Custom locale:</label> <input key={locale} defaultValue={locale} id="customLocale" name="customLocale" pattern="^[a-z]{2}(-[A-Z0-9]{2,3})?$" ref={customLocale} type="text" /> <button style={{ display: 'none' }} type="submit"> Set locale </button> <button disabled={locale === undefined} onClick={resetLocale} type="button"> Reset locale </button> </form> </fieldset> );}
LocaleOptions.propTypes = { locale: PropTypes.string, setLocale: PropTypes.func.isRequired,};