react-strings

Keep your content organized, easy to update, and multilingual—built for React.

Features

A lightweight solution for managing languages and preferences with ease.

• Smart Autocomplete ⚡
  Instantly access the right information with intelligent, developer-friendly autocompletion.
• Multi-Language Support 🗄️
  Manage single or multiple languages with a simple, centralized configuration.
• Persistent User Preferences 🔒
  Automatically saves and restores the user’s language choice using localStorage.
• No Extra Server Configuration 🙅🏻
  Ideal for apps with zero need for additional setup or configurations.
• Fast & Simple Integration 🚀
  Install, configure, and start using in just a few minutes.
• TypeScript Ready 🧩
  Fully typed brings safety, clarity, and scalability to your JavaScript code.

What does it look like?

// page.tsx

'use client';
import { useStrings } from '@/data/stringConfig';

export default function Home() {
  const { Str, Arr} = useStrings();
  const ver = '0.2.0';

  return (
  <>
    <StringsProvider stringConfig={stringConfig}>
      <h1>{Str.home.title()}</h1>
      <p>{Str.home.version({ version: ver })}</p>
      <ul>
        {Arr.home.features.map((obj, index) => (
          <li key={index}>
            <h2>{obj.item}</h2>
            <p>{obj.data}</p>
          </li>
        ))}
      </ul>
    </StringsProvider>
  );
}

// en.json
{
	"title": "Welcome to react-strings",
	"version": "Current version: {{version}}",
	"features": [
		{ "item": "Autocompletion", "data": "Remember keys" },
		{ "item": "Languages", "data": "Multi language support" },
		{ "item": "Identification", "data": "Browser & storage" }
	]
}

Docs and demos

Just remember the guides themselves are the demos, source code available.

• Next js
• React

Donations

It was fun (and sometimes very frustrating 😅) building this package! If you’d like to support its journey, a small donation goes a long way.

• Buy me a coffee

Every spark makes the project shine brighter