Skip to content

Lightweight i18n solution for React app ๐ŸŒ. Only 1kb zipped.

Notifications You must be signed in to change notification settings

ygeeker/react-i18n

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

1 Commit
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

react-i18n

A super-simple i18n solution for React app.

Usage

step 0: Define dictionary

i18n.json

{
	"nav": {
		"homePage": {
			"zh-CN": "ๅšๅฎข",
			"en-US": "Home"
		},
		"secondPage": {
			"zh-CN": "ๅฏ‚้™ๅœฐ",
			"en-US": "Special"
		},
		"search": {}
	}
}

step 1: Use

import Text from "../../utils/i18n";
import { nav } from "../../data/i18n.json";

const Menu = ({ lang }): React.ReactElement => {
	return (
		<ul className="app-header-list">
			<Text dictionary={nav} language={lang}>
				{[
					{
						text: <Text homePage />,
						to: "/",
					},
					{
						text: <Text secondPage />,
						to: "/special",
					},
				].map((item, i) => (
					<ActiveLink
						activeClassName="app-header-list-item-active"
						href={item.to}
					>
						<a className="app-header-list-item">{item.text}</a>
					</ActiveLink>
				))}
			</Text>
		</ul>
	);
};

LICENSE

MIT

About

Lightweight i18n solution for React app ๐ŸŒ. Only 1kb zipped.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published