[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Funderstanding-react-internationalization":671,"blog-author-\u002Fblog\u002Funderstanding-react-internationalization":1118,"i-material-symbols:arrow-back-rounded":1133},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":1105,"buttonUrl":1105,"category":1106,"date":1107,"description":1108,"draft":1109,"editorsPick":1109,"extension":1110,"featured":1109,"image":1111,"imageAlt":1112,"meta":1113,"navigation":32,"ogImage":1105,"ogImageAlt":1105,"path":1114,"seo":1115,"stem":1116,"tags":1105,"__hash__":1117},"blog\u002Fblog\u002Funderstanding-react-internationalization.md","Understanding React Internationalization","James Amoo","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ftailwind-theming-create-light-and-dark-modes\u002Fauthor.jpeg","Photo of the author: James Amoo.","james-amoo",{"type":679,"value":680,"toc":1087},"minimark",[681,685,693,696,701,704,738,742,745,752,757,760,771,775,778,799,802,806,813,817,826,837,843,849,874,880,883,887,891,894,900,943,946,953,956,962,965,969,991,1002,1006,1012,1018,1036,1040,1046,1052,1058,1064,1067,1073,1077,1080],[682,683,684],"p",{},"Whether you're creating solutions for web applications or mobile applications, a common factor in the development process is ensuring user satisfaction — ideas and implementations are created mainly to improve user experience, especially when building industry-standard applications. So, rather than asking \"What other feature can I add to this application?\", the appropriate question should be \"What other feature will the user want in this application?\" This is a very effective approach in aiming for maximum application scalability — putting the users first.",[682,686,687,688,692],{},"That said, a lot of factors are considered in ensuring users are getting the best of the application, one of which is grammatical comprehension by other demographics. This is a key development stage many developers tend to miss out on when creating solutions. What do I mean by this? Saying \"Hello World\" will be well understood by an English user, not so much for a Spanish user because then you have to say \"Hola Mundo\", or \"Bonjour le monde\" for a French user, and different lexical syntax for other languages. But how do you implement this? That's where the term ",[689,690,691],"strong",{},"Internationalization"," is put to use.",[682,694,695],{},"In this tutorial, you will learn about React Internationalization, its use case, and how to use it in your application.",[697,698,700],"h2",{"id":699},"prerequisites","Prerequisites",[682,702,703],{},"This tutorial will break the in-depth concepts of React Internationalization into very simple terms. However, you must know of the following:",[705,706,707,717,724,731],"ul",{},[708,709,710],"li",{},[711,712,716],"a",{"href":713,"rel":714},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fintroduction-to-html",[715],"nofollow","HTML",[708,718,719],{},[711,720,723],{"href":721,"rel":722},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fstyling-text-in-css",[715],"CSS",[708,725,726],{},[711,727,730],{"href":728,"rel":729},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript",[715],"JavaScript",[708,732,733],{},[711,734,737],{"href":735,"rel":736},"https:\u002F\u002Freact.dev\u002F",[715],"React",[697,739,741],{"id":740},"what-is-react-internationalization","What is React Internationalization?",[682,743,744],{},"Just before we get to React Internalization, a definition of the term \"internationalization\" is required. Internationalization is loosely referred to as i18n, meaning 18 for the number of characters between \"i\" and \"n\". It is the process of adding support for other languages and cultural settings in your application. In addition to providing the language translation, internationalization entails providing equivalents for the date and time format and number format.",[682,746,747,748,751],{},"As you would guess, React Internationalization is the process of implementing the functionalities of internationalization with ",[711,749,737],{"href":735,"rel":750},[715],". Quite interesting, isn't it?",[753,754,756],"h3",{"id":755},"the-need-for-react-internationalization","The Need for React Internationalization",[682,758,759],{},"Implementing Internationalization is important in many ways, some of which include:",[705,761,762,765,768],{},[708,763,764],{},"ease of application usage by users of different languages.",[708,766,767],{},"the wide and global reach of a product.",[708,769,770],{},"breaking the application scalability obstacles caused by language barriers.",[697,772,774],{"id":773},"how-does-it-work","How Does it Work?",[682,776,777],{},"Throughout this article, we will implement React Internationalization using a sample project, but hold on, what really happens behind the scenes? How does our application know the language of the users? More importantly, how does it know what language to translate it to? The process of Internationalization can be broken down into three stages:",[779,780,781,787,793],"ol",{},[708,782,783,786],{},[689,784,785],{},"Detecting the user's location",": To know what content (or language) to display to the user, the first step is to know the location of the user. With that, you also know the language they speak and ultimately choose from the range of languages to display.",[708,788,789,792],{},[689,790,791],{},"Translating UI elements:"," After successfully detecting the location of the user, what we would want to do next is to translate key aspects of the application to the language of the user. For instance, the \"Home\" page, which takes the English user to the root page of the application now becomes the \"Hogar\" page for the Spanish user, which runs the same function.",[708,794,795,798],{},[689,796,797],{},"Translating location-specific content:"," Internationalization does not only entail the translation of languages but also other content like dates, currencies, number format, etc. Dollars is the official currency of the United States but this would be confusing to a Japanese user because you would then have to spend the Yen, which is the official currency of Japan. Further, Japan is 13 hours ahead of the United States, so there has to be a dynamic display of date and time based on the location of the user.",[682,800,801],{},"Now that we know the raw process of internationalization, how do we implement the functionality using React?",[697,803,805],{"id":804},"getting-started","Getting Started",[682,807,808,809,812],{},"To ease the implementation of internationalization, there are React packages such as ",[689,810,811],{},"react-i18next"," which is used for React or React Native applications. It provides multiple components that handle the translation of elements or content based on a given user location. Let's see how we would set this up.",[753,814,816],{"id":815},"scaffolding-your-react-application","Scaffolding your React Application",[779,818,819],{},[708,820,821,822,825],{},"Let's start by creating a sample file named ",[689,823,824],{},"i18n-pieces-tutorial"," which we will be working on. We will be using Next.js as our build tool. Open your terminal and run the line of code:",[827,828,833],"pre",{"className":829,"code":831,"language":832},[830],"language-text","npx create-next-app i18n-pieces-tutorial\n","text",[834,835,831],"code",{"__ignoreMap":836},"",[779,838,840],{"start":839},2,[708,841,842],{},"Next, change the directory and run the server. This runs the application in our browser.",[827,844,847],{"className":845,"code":846,"language":832},[830],"cd i18n-pieces-tutorialnpm run dev\n",[834,848,846],{"__ignoreMap":836},[779,850,852],{"start":851},3,[708,853,854,855,860,861,865,866,873],{},"Install the dependencies. As we learned earlier, React provides a framework which can be used for Internationalization. We will install three packages; ",[711,856,859],{"href":857,"rel":858},"https:\u002F\u002Fwww.i18next.com\u002F",[715],"i18next"," package (the general library), the ",[711,862,811],{"href":863,"rel":864},"https:\u002F\u002Freact.i18next.com\u002F",[715]," package (specifically for React or React Native applications), and the ",[711,867,870],{"href":868,"rel":869},"https:\u002F\u002Fgithub.com\u002Fi18next\u002Fi18next-browser-languageDetector",[715],[689,871,872],{},"i18next-browser-language-detector"," (to detect the user's language). We do that by running the following line of code:",[827,875,878],{"className":876,"code":877,"language":832},[830],"npm install i18next react-i18next i18next-browser-languagedetector\n",[834,879,877],{"__ignoreMap":836},[682,881,882],{},"And that's it with the set-up!",[697,884,886],{"id":885},"creating-a-demo-translation-project","Creating a Demo Translation Project",[753,888,890],{"id":889},"configuring-i18n-for-nextjs","Configuring i18n for Next.js",[682,892,893],{},"Let's create a sample project in English, which we will then use to implement translation functionalities in other languages. But before we do that, we need to configure our i18n package. Suppose we want to implement an English-to-French translation functionality:",[827,895,898],{"className":896,"code":897,"language":832},[830],"\u002F\u002F i18n.js file\nimport i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\nimport LanguageDetector from \"i18next-browser-languagedetector\";\ni18n\n.use(LanguageDetector)\n.use(initReactI18next)\n.init({\n  debug: true,\n  fallbackLng: \"en\",\n  interpolation: {\n    escapeValue: false,\n  },\n  resources: {\n    en: {\n      translation: {\n        description: {\n          useCaseOne: \"Copy and save code snippets with Pieces App.\",\n          useCaseTwo:\n            \"Translate from one programming language to another using the Pieces App\",\n          useCaseThree: \"Generate code snippets using Pieces Co-Pilot\",\n        },\n      },\n    },\n    fr: {\n      translation: {\n        description: {\n          useCaseOne:\n            \"Copiez et enregistrez des extraits de code avec l'application Pieces.\",\n          useCaseTwo:\n           \"Traduire d'un langage de programmation à un autre à l'aide de l'application Pieces\",\n          useCaseThree:\n           \"Générez des extraits de code à l'aide de Pieces Co-Pilot.\",\n          },\n        },\n      },\n     },\n  });\nexport default i18n;\nHere, we import i18n from the i18next package, initReactI18next from the react-i18next package, and LanguageDetector from the i18next-browser-languagedetector package. Next, we initialize i18n by passing in the resources(which contains the language translation instances), the lng(which specifies the language we want to display at that instance), the fallbackLng(which specifies the default language to display if no language is recognized) and the interpolation, which is responsible for displaying dynamic values in translations, It is mostly used in displaying date and time values according to the user's location.\nIn our resources object, we give instances for our text in English using the en keyword and its equivalent in French using the fr keyword. Using the language detector, the text in English is displayed to English users while text in French is displayed to French users. We pass in three texts in our en object using useCaseOne, useCaseTwo and useCaseThree which stands for the basic use cases of the Pieces App, they are:\nCopy and save code snippets with Pieces App.\nTranslate from one programming language to another using the Pieces App.\nGenerate code snippets using Pieces Copilot.\nDisplaying Translation\nAfter configuring the i18next functionality, let's see what our code looks like in our browser.\nimport  '.\u002Fi18n';\nimport { useTranslation } from 'react-i18next';\nfunction App() {\n  const { t } = useTranslation();\n  return (\n       Pieces App       {t('description.useCaseOne')}       {t('description.useCaseTwo')}       {t('description.useCaseThree')}   \n  );\n}\nexport default App;\n",[834,899,897],{"__ignoreMap":836},[682,901,902,903,906,907,910,911,914,915,917,918,920,921,924,925,927,928,930,931,936,937,942],{},"Here, we import the React ",[834,904,905],{},"i18n"," package and ",[834,908,909],{},"useTranslation"," hook into our ",[834,912,913],{},"App.js"," file. The ",[834,916,905],{}," package imports the functionality while we use the ",[834,919,909],{}," hook to handle translation between languages. The ",[834,922,923],{},"t()"," method, which is obtained from the ",[834,926,909],{}," hook is used to translate texts from one language to another as specified in the ",[834,929,859],{}," file. And so we pass in texts using three use cases of the ",[711,932,935],{"href":933,"rel":934},"https:\u002F\u002Fpieces.app\u002F",[715],"Pieces App"," as defined earlier. To learn how to create ",[711,938,941],{"href":939,"rel":940},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fcreating-custom-hooks-reactjs",[715],"custom hooks",", visit this site.",[682,944,945],{},"For English users, this is what is displayed on the screen:",[682,947,948],{},[949,950],"img",{"alt":951,"src":952},"The English version of the displayed message.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Funderstanding-react-internationalization\u002Fimg-001.png",[682,954,955],{},"For French users, this is displayed:",[682,957,958],{},[949,959],{"alt":960,"src":961},"The French version of the displayed message.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Funderstanding-react-internationalization\u002Fimg-002.png",[682,963,964],{},"Now we have implemented translations for English and French based on the user's location. We can go further to define translations for other languages.",[697,966,968],{"id":967},"interpolation-and-pluralization","Interpolation and Pluralization",[682,970,971,976,977,979,980,985,986,990],{},[711,972,975],{"href":973,"rel":974},"https:\u002F\u002Fwww.i18next.com\u002Ftranslation-function\u002Finterpolation",[715],"Interpolation"," is one of the features of the ",[834,978,859],{}," package. It allows you to input dynamic values in your translations. ",[711,981,984],{"href":982,"rel":983},"https:\u002F\u002Fwww.i18next.com\u002Ftranslation-function\u002Fplurals",[715],"Pluralization",", on the other hand, deals with representing the plural form of words across different languages. With the help of the interpolation feature in React, we can easily implement plural forms by just inputting the number we want, and it automatically reflects in the other languages. For instance, if we want to change \"",[987,988,989],"em",{},"I read the Pieces blog one time every day","\" to its plural form, we do not have to manually make changes to the sentence, all we have to do is pass the number into a variable and it changes.",[682,992,993,994,997,998,1001],{},"You might think, \"This isn't so stressful, I can just manually change ",[689,995,996],{},"one"," to ",[689,999,1000],{},"three"," right?\" Well, maybe not so stressful if it is done in the same language, but imagine having to make translations for about 5 languages. That can be tasking. Interpolation allows you to make the change just once, and it reflects in other languages.",[753,1003,1005],{"id":1004},"implementing-interpolation-and-pluralization","Implementing Interpolation and Pluralization",[682,1007,1008,1009,1011],{},"Let's see how this works, you can re-configure the resources object in your ",[834,1010,859],{}," file like this:",[827,1013,1016],{"className":1014,"code":1015,"language":832},[830],"import i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\nimport LanguageDetector from \"i18next-browser-languagedetector\";\ni18n\n  .use(LanguageDetector)\n  .use(initReactI18next)\n  .init({\n    debug: true,\n    fallbackLng: \"en\",\n    interpolation: {\n      escapeValue: false,\n    },\n    resources: {\n      en: {\n        translation: {\n          description: {\n            useCaseOne: \"Copy and save code snippets with Pieces App.\",\n            useCaseTwo:\n              \"Translate from one programming language to another using the Pieces App\",\n            useCaseThree: \"Generate code snippets using Pieces Co-Pilot\",\n          },\n          interpolation_pluralization: {\n            singular: \"I read the Pieces blog one time every day\",\n            plural: \"I read the Pieces blog {{count}} times every day\",\n          },\n        },\n      },\n      fr: {\n        translation: {\n          description: {\n            useCaseOne:\n              \"Copiez et enregistrez des extraits de code avec l'application Pieces.\",\n            useCaseTwo:\n              \"Traduire d'un langage de programmation à un autre à l'aide de l'application Pieces\",\n            useCaseThree:\n              \"Générez des extraits de code à l'aide de Pieces Co-Pilot.\",\n        },\n        interpolation_pluralization: {\n          singular: \"Je lis le blog Pieces une fois par jour\",\n          plural: \"Je lis le blog Pieces {{count}} fois par jour\",\n        },\n      },\n    },\n  },\n});\nexport default i18n;\n",[834,1017,1015],{"__ignoreMap":836},[682,1019,1020,1021,1024,1025,1028,1029,1032,1033,1035],{},"In this update, we added the ",[834,1022,1023],{},"interpolation_pluralization"," object which specifies the translation based on the quantity passed into the ",[834,1026,1027],{},"count"," variable. If it is singular, it reads \"one time\" across other languages. If it is plural, it reads \"",[834,1030,1031],{},"{{count}}"," times\", where ",[834,1034,1027],{}," represents the number passed into it.",[753,1037,1039],{"id":1038},"displaying-content","Displaying Content",[682,1041,1042,1043,1045],{},"Now that we have made the updates in our configuration, we can then display the content. Updating the content in our ",[834,1044,913],{}," file, we have:",[827,1047,1050],{"className":1048,"code":1049,"language":832},[830],"import \".\u002Fi18n\";\nimport { useTranslation } from \"react-i18next\";\nfunction App() {\n  const { t } = useTranslation();\n  return (\n      Pieces App      {t(\"interpolation_pluralization.text\", { count: 3 })}    \n  );\n}\n",[834,1051,1049],{"__ignoreMap":836},[682,1053,1054,1055,1057],{},"Since we have set the value in our ",[834,1056,1027],{}," to three, here's the output for English users:",[682,1059,1060],{},[949,1061],{"alt":1062,"src":1063},"The English output.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Funderstanding-react-internationalization\u002Fimg-003.png",[682,1065,1066],{},"This is what is displayed for French users:",[682,1068,1069],{},[949,1070],{"alt":1071,"src":1072},"The French output.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Funderstanding-react-internationalization\u002Fimg-004.png",[697,1074,1076],{"id":1075},"conclusion","Conclusion",[682,1078,1079],{},"By following this tutorial, you have learned the meaning of Internationalization, the need for Internationalization in React, how to translate text from one language to another using the React i18n package, how to configure the React Internationalization packages, the meaning of Interpolation and Pluralization, and how to implement Interpolation and Pluralization in your application.",[682,1081,1082,1083,1086],{},"However, it does not end here, you can explore more by implementing translation to other languages using the ",[711,1084,811],{"href":863,"rel":1085},[715]," documentation. The next step would be implementing React localization to refine your application. Have fun!",{"title":836,"searchDepth":839,"depth":839,"links":1088},[1089,1090,1093,1094,1097,1100,1104],{"id":699,"depth":839,"text":700},{"id":740,"depth":839,"text":741,"children":1091},[1092],{"id":755,"depth":851,"text":756},{"id":773,"depth":839,"text":774},{"id":804,"depth":839,"text":805,"children":1095},[1096],{"id":815,"depth":851,"text":816},{"id":885,"depth":839,"text":886,"children":1098},[1099],{"id":889,"depth":851,"text":890},{"id":967,"depth":839,"text":968,"children":1101},[1102,1103],{"id":1004,"depth":851,"text":1005},{"id":1038,"depth":851,"text":1039},{"id":1075,"depth":839,"text":1076},null,"Software Development","2023-08-29T00:00:00.000Z","In this article, you’ll learn about React Internationalization, translating with i18next, configuring i18n packages, and applying other React features in your app.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Funderstanding-react-internationalization\u002Fhero.jpeg","Photo of a world globe.",{},"\u002Fblog\u002Funderstanding-react-internationalization",{"title":673,"description":1108},"blog\u002Funderstanding-react-internationalization","g2wnWix_y-kjrfDtSemeqzdEU6PxIx3DoSJeZ8imI2o",{"id":1119,"title":674,"body":1120,"description":1124,"draft":1109,"extension":1110,"meta":1127,"navigation":32,"path":1128,"photo":1129,"photoAlt":1105,"seo":1130,"stem":1131,"__hash__":1132},"authors\u002Fauthors\u002Fjames-amoo.md",{"type":679,"value":1121,"toc":1125},[1122],[682,1123,1124],{},"James Amoo is a Software Engineer and a Technical Writer. He excels in creating scalable software solutions and crafting clear and concise documentation. Having graduated with a First Class Honours degree in Computer Science, he is fundamentally well-versed in the in-depth concepts of programming.",{"title":836,"searchDepth":839,"depth":839,"links":1126},[],{},"\u002Fauthors\u002Fjames-amoo","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fjames-amoo.jpeg",{"title":674,"description":1124},"authors\u002Fjames-amoo","cHsg7jg2RaRueV_cvOOD8JHsrLPQxt-lYAgFPEDW_A8",{"left":1134,"top":1134,"width":1135,"height":1135,"rotate":1134,"vFlip":1109,"hFlip":1109,"body":1136},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]