@belocal/react 0.1.0

package/README.md

@@ -0,0 +1,190 @@
+# @belocal/react
+
+React SDK for Belocal translation service. Provides easy-to-use React components and hooks for translating your application content.
+
+## Installation
+
+```bash
+npm install @belocal/react
+```
+
+## Quick Start
+
+### 1. Wrap your app with BelocalProvider
+
+```tsx
+import { BelocalProvider } from '@belocal/react';
+
+function App() {
+  return (
+    <BelocalProvider
+      apiKey="your-api-key"
+      defaultLang="en"
+      baseUrl="https://api.belocal.dev" // optional
+    >
+      <YourApp />
+    </BelocalProvider>
+  );
+}
+```
+
+### 2. Use the Translate component
+
+```tsx
+import { Translate } from '@belocal/react';
+
+function Welcome() {
+  return (
+    <div>
+      <h1>
+        <Translate 
+          text="Welcome to our app!" 
+          fallback="Loading..." 
+        />
+      </h1>
+      
+      <p>
+        <Translate 
+          text="Hello {name}!" 
+          ctx={{ name: "John" }}
+          lang="es" // Override default language
+        />
+      </p>
+    </div>
+  );
+}
+```
+
+### 3. Use the useBelocal hook
+
+```tsx
+import { useBelocal } from '@belocal/react';
+
+function CustomTranslation() {
+  const { engine, defaultLang } = useBelocal();
+  const [translation, setTranslation] = useState('');
+
+  useEffect(() => {
+    engine.t('Hello world!', defaultLang)
+      .then(setTranslation)
+      .catch(console.error);
+  }, [engine, defaultLang]);
+
+  return <span>{translation}</span>;
+}
+```
+
+## API Reference
+
+### BelocalProvider
+
+The root provider component that initializes the Belocal engine.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `apiKey` | `string` | ✅ | Your Belocal API key |
+| `baseUrl` | `string` | ❌ | Custom API base URL |
+| `defaultLang` | `string` | ❌ | Default language for translations |
+| `children` | `React.ReactNode` | ✅ | Child components |
+
+### Translate
+
+Component for displaying translated text.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `text` | `string` | ✅ | Text to translate |
+| `lang` | `string` | ❌ | Target language (overrides defaultLang) |
+| `ctx` | `Record<string, any>` | ❌ | Context variables for interpolation |
+| `fallback` | `string` | ❌ | Text to show while loading |
+
+#### Language Priority
+
+The language selection follows this priority:
+1. `lang` prop (highest priority)
+2. `defaultLang` from BelocalProvider
+3. No translation if neither is provided
+
+### useBelocal
+
+Hook for accessing the Belocal engine and configuration.
+
+#### Returns
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `engine` | `BelocalEngine` | Belocal engine instance |
+| `defaultLang` | `string \| undefined` | Default language from provider |
+
+#### Throws
+
+- Error if used outside of `BelocalProvider`
+
+## Error Handling
+
+- **Network errors**: Component falls back to original text
+- **Missing provider**: `useBelocal` throws an error
+- **Invalid context**: Console error, falls back to original text
+
+## TypeScript Support
+
+Full TypeScript support with exported types:
+
+```tsx
+import type { 
+  BelocalProviderProps, 
+  TranslateProps 
+} from '@belocal/react';
+```
+
+## Examples
+
+### Conditional Translation
+
+```tsx
+<Translate 
+  text="Good morning!"
+  lang={userPreferredLanguage}
+  fallback="Loading translation..."
+/>
+```
+
+### Variable Interpolation
+
+```tsx
+<Translate 
+  text="You have {count} new messages"
+  ctx={{ count: unreadCount }}
+/>
+```
+
+### Manual Translation
+
+```tsx
+function ManualTranslation() {
+  const { engine } = useBelocal();
+  
+  const handleTranslate = async () => {
+    try {
+      const result = await engine.t('Custom text', 'fr');
+      console.log(result);
+    } catch (error) {
+      console.error('Translation failed:', error);
+    }
+  };
+
+  return <button onClick={handleTranslate}>Translate</button>;
+}
+```
+
+## License
+
+MIT
+
+## Support
+
+For issues and questions, please visit [GitHub Issues](https://github.com/belocal/sdk/issues).

package/dist/index.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var react = require('react');
+var jsSdk = require('@belocal/js-sdk');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/BelocalProvider.tsx
+var BelocalContext = react.createContext(null);
+var BelocalProvider = ({
+  apiKey,
+  baseUrl,
+  defaultLang,
+  children
+}) => {
+  const contextValue = react.useMemo(() => {
+    const engine = new jsSdk.BelocalEngine({
+      apiKey,
+      baseUrl
+    });
+    return {
+      engine,
+      defaultLang
+    };
+  }, [apiKey, baseUrl, defaultLang]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BelocalContext.Provider, { value: contextValue, children });
+};
+var useBelocalContext = () => {
+  const context = react.useContext(BelocalContext);
+  if (!context) {
+    throw new Error("useBelocalContext must be used within a BelocalProvider");
+  }
+  return context;
+};
+
+// src/useBelocal.ts
+var useBelocal = () => {
+  return useBelocalContext();
+};
+var Translate = ({
+  text,
+  lang,
+  ctx,
+  fallback
+}) => {
+  const { engine, defaultLang } = useBelocal();
+  const [translatedText, setTranslatedText] = react.useState(fallback || text);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const targetLang = lang ?? defaultLang;
+  react.useEffect(() => {
+    if (!targetLang) {
+      setTranslatedText(text);
+      return;
+    }
+    setIsLoading(true);
+    engine.t(text, targetLang, ctx).then((translation) => {
+      setTranslatedText(translation);
+    }).catch((error) => {
+      console.error("Translation error:", error);
+      setTranslatedText(text);
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, [text, targetLang, ctx, engine]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback || text });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: translatedText });
+};
+
+exports.BelocalProvider = BelocalProvider;
+exports.Translate = Translate;
+exports.useBelocal = useBelocal;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/BelocalProvider.tsx","../src/useBelocal.ts","../src/Translate.tsx"],"names":["createContext","useMemo","BelocalEngine","useContext","useState","useEffect","jsx","Fragment"],"mappings":";;;;;;;AAeA,IAAM,cAAA,GAAiBA,oBAAyC,IAAI,CAAA;AAE7D,IAAM,kBAAkD,CAAC;AAAA,EAC9D,MAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,YAAA,GAAeC,cAAQ,MAAM;AACjC,IAAA,MAAM,MAAA,GAAS,IAAIC,mBAAA,CAAc;AAAA,MAC/B,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,OAAO;AAAA,MACL,MAAA;AAAA,MACA;AAAA,KACF;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,OAAA,EAAS,WAAW,CAAC,CAAA;AAEjC,EAAA,sCACG,cAAA,CAAe,QAAA,EAAf,EAAwB,KAAA,EAAO,cAC7B,QAAA,EACH,CAAA;AAEJ;AAEO,IAAM,oBAAoB,MAAM;AACrC,EAAA,MAAM,OAAA,GAAUC,iBAAW,cAAc,CAAA;AACzC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,yDAAyD,CAAA;AAAA,EAC3E;AACA,EAAA,OAAO,OAAA;AACT,CAAA;;;AC9CO,IAAM,aAAa,MAAM;AAC9B,EAAA,OAAO,iBAAA,EAAkB;AAC3B;ACMO,IAAM,YAAsC,CAAC;AAAA,EAClD,IAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAI,UAAA,EAAW;AAC3C,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIC,cAAA,CAAiB,YAAY,IAAI,CAAA;AAC7E,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAkB,KAAK,CAAA;AAGzD,EAAA,MAAM,aAAa,IAAA,IAAQ,WAAA;AAE3B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,UAAA,EAAY;AAEf,MAAA,iBAAA,CAAkB,IAAI,CAAA;AACtB,MAAA;AAAA,IACF;AAEA,IAAA,YAAA,CAAa,IAAI,CAAA;AAEjB,IAAA,MAAA,CACG,EAAE,IAAA,EAAM,UAAA,EAAY,GAAG,CAAA,CACvB,IAAA,CAAK,CAAC,WAAA,KAAgB;AACrB,MAAA,iBAAA,CAAkB,WAAW,CAAA;AAAA,IAC/B,CAAC,CAAA,CACA,KAAA,CAAM,CAAC,KAAA,KAAU;AAChB,MAAA,OAAA,CAAQ,KAAA,CAAM,sBAAsB,KAAK,CAAA;AAEzC,MAAA,iBAAA,CAAkB,IAAI,CAAA;AAAA,IACxB,CAAC,CAAA,CACA,OAAA,CAAQ,MAAM;AACb,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,IACpB,CAAC,CAAA;AAAA,EACL,GAAG,CAAC,IAAA,EAAM,UAAA,EAAY,GAAA,EAAK,MAAM,CAAC,CAAA;AAGlC,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBAAOC,cAAAA,CAAAC,mBAAA,EAAA,EAAG,QAAA,EAAA,QAAA,IAAY,IAAA,EAAK,CAAA;AAAA,EAC7B;AAEA,EAAA,uBAAOD,cAAAA,CAAAC,mBAAA,EAAA,EAAG,QAAA,EAAA,cAAA,EAAe,CAAA;AAC3B","file":"index.cjs","sourcesContent":["import React, { createContext, useContext, useMemo } from 'react';\nimport { BelocalEngine } from '@belocal/js-sdk';\n\nexport type BelocalProviderProps = {\n  apiKey: string;\n  baseUrl?: string;\n  defaultLang?: string;\n  children: React.ReactNode;\n};\n\ntype BelocalContextType = {\n  engine: BelocalEngine;\n  defaultLang?: string;\n};\n\nconst BelocalContext = createContext<BelocalContextType | null>(null);\n\nexport const BelocalProvider: React.FC<BelocalProviderProps> = ({\n  apiKey,\n  baseUrl,\n  defaultLang,\n  children,\n}) => {\n  const contextValue = useMemo(() => {\n    const engine = new BelocalEngine({\n      apiKey,\n      baseUrl,\n    });\n\n    return {\n      engine,\n      defaultLang,\n    };\n  }, [apiKey, baseUrl, defaultLang]);\n\n  return (\n    <BelocalContext.Provider value={contextValue}>\n      {children}\n    </BelocalContext.Provider>\n  );\n};\n\nexport const useBelocalContext = () => {\n  const context = useContext(BelocalContext);\n  if (!context) {\n    throw new Error('useBelocalContext must be used within a BelocalProvider');\n  }\n  return context;\n};\n\n","import { useBelocalContext } from './BelocalProvider';\n\nexport const useBelocal = () => {\n  return useBelocalContext();\n};\n\n","import React, { useState, useEffect } from 'react';\nimport { useBelocal } from './useBelocal';\n\nexport type TranslateProps = {\n  text: string;\n  lang?: string;\n  ctx?: Record<string, any>;\n  fallback?: string;\n};\n\nexport const Translate: React.FC<TranslateProps> = ({\n  text,\n  lang,\n  ctx,\n  fallback,\n}) => {\n  const { engine, defaultLang } = useBelocal();\n  const [translatedText, setTranslatedText] = useState<string>(fallback || text);\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  // Выбираем язык: props.lang имеет приоритет над defaultLang\n  const targetLang = lang ?? defaultLang;\n\n  useEffect(() => {\n    if (!targetLang) {\n      // Если язык не указан, просто возвращаем исходный текст\n      setTranslatedText(text);\n      return;\n    }\n\n    setIsLoading(true);\n    \n    engine\n      .t(text, targetLang, ctx)\n      .then((translation) => {\n        setTranslatedText(translation);\n      })\n      .catch((error) => {\n        console.error('Translation error:', error);\n        // При ошибке возвращаем исходный текст\n        setTranslatedText(text);\n      })\n      .finally(() => {\n        setIsLoading(false);\n      });\n  }, [text, targetLang, ctx, engine]);\n\n  // Пока идёт запрос — рендерим fallback или исходный text\n  if (isLoading) {\n    return <>{fallback || text}</>;\n  }\n\n  return <>{translatedText}</>;\n};\n\n"]}

package/dist/index.d.cts

@@ -0,0 +1,25 @@
+import React from 'react';
+import * as _belocal_js_sdk from '@belocal/js-sdk';
+
+type BelocalProviderProps = {
+    apiKey: string;
+    baseUrl?: string;
+    defaultLang?: string;
+    children: React.ReactNode;
+};
+declare const BelocalProvider: React.FC<BelocalProviderProps>;
+
+declare const useBelocal: () => {
+    engine: _belocal_js_sdk.BelocalEngine;
+    defaultLang?: string;
+};
+
+type TranslateProps = {
+    text: string;
+    lang?: string;
+    ctx?: Record<string, any>;
+    fallback?: string;
+};
+declare const Translate: React.FC<TranslateProps>;
+
+export { BelocalProvider, type BelocalProviderProps, Translate, type TranslateProps, useBelocal };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import * as _belocal_js_sdk from '@belocal/js-sdk';
+
+type BelocalProviderProps = {
+    apiKey: string;
+    baseUrl?: string;
+    defaultLang?: string;
+    children: React.ReactNode;
+};
+declare const BelocalProvider: React.FC<BelocalProviderProps>;
+
+declare const useBelocal: () => {
+    engine: _belocal_js_sdk.BelocalEngine;
+    defaultLang?: string;
+};
+
+type TranslateProps = {
+    text: string;
+    lang?: string;
+    ctx?: Record<string, any>;
+    fallback?: string;
+};
+declare const Translate: React.FC<TranslateProps>;
+
+export { BelocalProvider, type BelocalProviderProps, Translate, type TranslateProps, useBelocal };

package/dist/index.js

@@ -0,0 +1,70 @@
+import { createContext, useMemo, useState, useEffect, useContext } from 'react';
+import { BelocalEngine } from '@belocal/js-sdk';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+// src/BelocalProvider.tsx
+var BelocalContext = createContext(null);
+var BelocalProvider = ({
+  apiKey,
+  baseUrl,
+  defaultLang,
+  children
+}) => {
+  const contextValue = useMemo(() => {
+    const engine = new BelocalEngine({
+      apiKey,
+      baseUrl
+    });
+    return {
+      engine,
+      defaultLang
+    };
+  }, [apiKey, baseUrl, defaultLang]);
+  return /* @__PURE__ */ jsx(BelocalContext.Provider, { value: contextValue, children });
+};
+var useBelocalContext = () => {
+  const context = useContext(BelocalContext);
+  if (!context) {
+    throw new Error("useBelocalContext must be used within a BelocalProvider");
+  }
+  return context;
+};
+
+// src/useBelocal.ts
+var useBelocal = () => {
+  return useBelocalContext();
+};
+var Translate = ({
+  text,
+  lang,
+  ctx,
+  fallback
+}) => {
+  const { engine, defaultLang } = useBelocal();
+  const [translatedText, setTranslatedText] = useState(fallback || text);
+  const [isLoading, setIsLoading] = useState(false);
+  const targetLang = lang ?? defaultLang;
+  useEffect(() => {
+    if (!targetLang) {
+      setTranslatedText(text);
+      return;
+    }
+    setIsLoading(true);
+    engine.t(text, targetLang, ctx).then((translation) => {
+      setTranslatedText(translation);
+    }).catch((error) => {
+      console.error("Translation error:", error);
+      setTranslatedText(text);
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, [text, targetLang, ctx, engine]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback || text });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: translatedText });
+};
+
+export { BelocalProvider, Translate, useBelocal };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/BelocalProvider.tsx","../src/useBelocal.ts","../src/Translate.tsx"],"names":["jsx"],"mappings":";;;;;AAeA,IAAM,cAAA,GAAiB,cAAyC,IAAI,CAAA;AAE7D,IAAM,kBAAkD,CAAC;AAAA,EAC9D,MAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,MAAM,MAAA,GAAS,IAAI,aAAA,CAAc;AAAA,MAC/B,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,OAAO;AAAA,MACL,MAAA;AAAA,MACA;AAAA,KACF;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,OAAA,EAAS,WAAW,CAAC,CAAA;AAEjC,EAAA,2BACG,cAAA,CAAe,QAAA,EAAf,EAAwB,KAAA,EAAO,cAC7B,QAAA,EACH,CAAA;AAEJ;AAEO,IAAM,oBAAoB,MAAM;AACrC,EAAA,MAAM,OAAA,GAAU,WAAW,cAAc,CAAA;AACzC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,yDAAyD,CAAA;AAAA,EAC3E;AACA,EAAA,OAAO,OAAA;AACT,CAAA;;;AC9CO,IAAM,aAAa,MAAM;AAC9B,EAAA,OAAO,iBAAA,EAAkB;AAC3B;ACMO,IAAM,YAAsC,CAAC;AAAA,EAClD,IAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAI,UAAA,EAAW;AAC3C,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,QAAA,CAAiB,YAAY,IAAI,CAAA;AAC7E,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAkB,KAAK,CAAA;AAGzD,EAAA,MAAM,aAAa,IAAA,IAAQ,WAAA;AAE3B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,UAAA,EAAY;AAEf,MAAA,iBAAA,CAAkB,IAAI,CAAA;AACtB,MAAA;AAAA,IACF;AAEA,IAAA,YAAA,CAAa,IAAI,CAAA;AAEjB,IAAA,MAAA,CACG,EAAE,IAAA,EAAM,UAAA,EAAY,GAAG,CAAA,CACvB,IAAA,CAAK,CAAC,WAAA,KAAgB;AACrB,MAAA,iBAAA,CAAkB,WAAW,CAAA;AAAA,IAC/B,CAAC,CAAA,CACA,KAAA,CAAM,CAAC,KAAA,KAAU;AAChB,MAAA,OAAA,CAAQ,KAAA,CAAM,sBAAsB,KAAK,CAAA;AAEzC,MAAA,iBAAA,CAAkB,IAAI,CAAA;AAAA,IACxB,CAAC,CAAA,CACA,OAAA,CAAQ,MAAM;AACb,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,IACpB,CAAC,CAAA;AAAA,EACL,GAAG,CAAC,IAAA,EAAM,UAAA,EAAY,GAAA,EAAK,MAAM,CAAC,CAAA;AAGlC,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBAAOA,GAAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,QAAA,IAAY,IAAA,EAAK,CAAA;AAAA,EAC7B;AAEA,EAAA,uBAAOA,GAAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,cAAA,EAAe,CAAA;AAC3B","file":"index.js","sourcesContent":["import React, { createContext, useContext, useMemo } from 'react';\nimport { BelocalEngine } from '@belocal/js-sdk';\n\nexport type BelocalProviderProps = {\n  apiKey: string;\n  baseUrl?: string;\n  defaultLang?: string;\n  children: React.ReactNode;\n};\n\ntype BelocalContextType = {\n  engine: BelocalEngine;\n  defaultLang?: string;\n};\n\nconst BelocalContext = createContext<BelocalContextType | null>(null);\n\nexport const BelocalProvider: React.FC<BelocalProviderProps> = ({\n  apiKey,\n  baseUrl,\n  defaultLang,\n  children,\n}) => {\n  const contextValue = useMemo(() => {\n    const engine = new BelocalEngine({\n      apiKey,\n      baseUrl,\n    });\n\n    return {\n      engine,\n      defaultLang,\n    };\n  }, [apiKey, baseUrl, defaultLang]);\n\n  return (\n    <BelocalContext.Provider value={contextValue}>\n      {children}\n    </BelocalContext.Provider>\n  );\n};\n\nexport const useBelocalContext = () => {\n  const context = useContext(BelocalContext);\n  if (!context) {\n    throw new Error('useBelocalContext must be used within a BelocalProvider');\n  }\n  return context;\n};\n\n","import { useBelocalContext } from './BelocalProvider';\n\nexport const useBelocal = () => {\n  return useBelocalContext();\n};\n\n","import React, { useState, useEffect } from 'react';\nimport { useBelocal } from './useBelocal';\n\nexport type TranslateProps = {\n  text: string;\n  lang?: string;\n  ctx?: Record<string, any>;\n  fallback?: string;\n};\n\nexport const Translate: React.FC<TranslateProps> = ({\n  text,\n  lang,\n  ctx,\n  fallback,\n}) => {\n  const { engine, defaultLang } = useBelocal();\n  const [translatedText, setTranslatedText] = useState<string>(fallback || text);\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  // Выбираем язык: props.lang имеет приоритет над defaultLang\n  const targetLang = lang ?? defaultLang;\n\n  useEffect(() => {\n    if (!targetLang) {\n      // Если язык не указан, просто возвращаем исходный текст\n      setTranslatedText(text);\n      return;\n    }\n\n    setIsLoading(true);\n    \n    engine\n      .t(text, targetLang, ctx)\n      .then((translation) => {\n        setTranslatedText(translation);\n      })\n      .catch((error) => {\n        console.error('Translation error:', error);\n        // При ошибке возвращаем исходный текст\n        setTranslatedText(text);\n      })\n      .finally(() => {\n        setIsLoading(false);\n      });\n  }, [text, targetLang, ctx, engine]);\n\n  // Пока идёт запрос — рендерим fallback или исходный text\n  if (isLoading) {\n    return <>{fallback || text}</>;\n  }\n\n  return <>{translatedText}</>;\n};\n\n"]}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@belocal/react",
+  "version": "0.1.0",
+  "description": "React SDK for Belocal translation service",
+  "license": "MIT",
+  "author": "bobredobre <bobredobre@belocal.dev>",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "dependencies": {
+    "@belocal/js-sdk": "^0.1.12"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.0.0",
+    "tsup": "^8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}