📦 strix-ai

📦 strix-ai is a powerful package designed for ⚡dynamic localization, enabling seamless updates to HTML content in different languages using 📁 JSON data. This tool makes it simple to localize 🕸️ websites or 🔦 applications by dynamically injecting content based on a ✏️ structured JSON object.

[!IMPORTANT] If you encounter any issues or need assistance, please open a GitHub issue or contact the maintainer directly to ensure a quick resolution and continued support.

[!NOTE] This package is actively maintained, ensuring that it stays up-to-date with the latest improvements, bug fixes, and features.

🔦 Live

To Convert the ✏️ JSON into multiple languages effortlessly using our 🔮 dynamic localization tool. Access it here .

✨ Features

• 📁 Dynamic Localization: Easily switch content for multiple languages.

• 🕸️ Seamless Integration: Updates innerHTML of elements within a container.

• 🚨 Error Handling: Logs warnings for missing elements or containers.

• ☁️ Type-Safe Implementation: Leverage TypeScript for robust and error-free development.

📦 Installation

Install the package using npm:

npm install strix-ai

🔧 Usage

JavaScript Version

Example

Import the package and use it in your project:

const strixAdd = require("strix-ai");

const strixJSON = {
  title: "Welcome",
  subtitle: "A lightweight utility",
  buttonText: "Click Me",
  description: "This is dynamically updated content.",
};

strixAdd(strixJSON);

TypeScript Version

Example

Import the package and use it in your TypeScript project:

import strixAdd from "strix-ai";

interface StrixJSON {
  title: string;
  subtitle: string;
  buttonText: string;
  description: string;
}

const strixJSON: StrixJSON = {
  title: "Welcome",
  subtitle: "A lightweight utility",
  buttonText: "Click Me",
  description: "This is dynamically updated content.",
};

strixAdd(strixJSON);

or

import strixAdd from "strix-ai";

const strixJSON = {
  title: "Welcome",
  subtitle: "A lightweight utility",
  buttonText: "Click Me",
  description: "This is dynamically updated content.",
};

strixAdd(strixJSON);

HTML or return()

Example

Use the following structure for HTML:

Use a parent <div> element with the id="useStrix" to integrate the JSON seamlessly.

<div id="useStrix">
  <h1 id="title"></h1>
  <h2 id="subtitle"></h2>
  <button id="buttonText"></button>
  <p id="description"></p>
</div>

⚠️ Error Handling

[!IMPORTANT] Logs an error if the container element with ID useStrix is not found.

[!IMPORTANT] Logs a warning if an element corresponding to a key in strixJSON is missing.

📋 Future Updates

• [ ] Nested JSON: Add support for nested JSON structures.

• [ ] Default values: Provide default values for missing keys.

• [ ] Multilanguage integration: Add multilingual support out of the box.

• [ ] Error handling: Improve error messages with detailed debugging information.

🤝 Contribution

Feel 🆓 free to contribute by opening an 🔓 issue or submitting a 🚪 pull request.

📄 License

MIT