Configure Provider for Language、Theme ...

demo

Theme

// App.js

import { ConfigureMapProvider, useConfigureMap } from 'configure-map'
import { useState } from 'react'
import { mapping } from './mapping'

// language可以只放在fallback对应的对象中，也可以在各个对象中都放入language
function ThemeAndLanguage() {
	const [lang, setLang] = useState('en')
	const { tr, changeValue, value } = useConfigureMap() // 推荐
	// const { tr, changeValue, value, data } = useConfigureMap(true)
	return (
		<div>
			<div style={{ color: tr('color') }}>{tr(`language.${lang}.hello`)}</div>
			<div style={{ color: tr('color') }}>{tr(`language.${lang}.age`)}</div>
			{/* <div style={{ color: tr('color') }}>{data.language[lang].hello}</div> */}
			<button onClick={() => changeValue(value === 'dark' ? 'light' : 'dark')}>Change Theme</button>
			<button onClick={() => setLang(lang === 'en' ? 'zh' : 'en')}>Change Language</button>
		</div>
	)
}

// value 当前mapping中对应的数据; fallback: 如果mapping[value][key]不存在，则使用fallback中的数据 [语言设置可以利用这点，只需要再fallback对应的对象中设置；当然也可以所有对象中都设置]
const App = () => {
	// Both Theme And Language
	return (
		<ConfigureMapProvider mapping={{ dark: mapping.dark, light: mapping.light }} fallback='light' value='dark'>
			<ThemeAndLanguage/>
		</ConfigureMapProvider>
	)
}

export default App

// mapping.js

// 每个主题 可以 单独放在一个文件中 来配置

const dark = {
	color: 'red',
	size: 30,
}

const light = {
	color: 'blue',
	size: 40,

	// 你可以单独放在一个文件中 配置语言
	language: {
		en: {
			hello: 'Hello',
			age: 'Age',
		},
		zh: {
			hello: '你好',
			age: '年龄',
		},
	},
}

export const mapping = { dark, light }