{"_id":"@teliagen/react","_rev":"27-a889061b61bca72d4edc1853380e9466","name":"@teliagen/react","dist-tags":{"latest":"0.4.2"},"versions":{"0.4.0":{"name":"@teliagen/react","version":"0.4.0","author":{"name":"Teliagen Team","email":"contact@teliagen.org"},"license":"Apache-2.0","_id":"@teliagen/react@0.4.0","maintainers":[{"name":"teliagen_off","email":"admin@teliagen.org"}],"homepage":"https://docs.teliagen.org","bugs":{"url":"https://github.com/teliagen/teliagen-framework/issues"},"dist":{"shasum":"8595b019dd2108128f848f13dc67ca070406108c","tarball":"https://registry.npmjs.org/@teliagen/react/-/react-0.4.0.tgz","fileCount":8,"integrity":"sha512-5yWwg5nZgDQFT0xhWiMkvQVQQW0X3Qzox/xq9PEVSiGzJUUkKzWKo9Cqy64Ox/DwTQJ0N85t0mjRXmRPJOw7Qg==","signatures":[{"sig":"MEYCIQDW0LJYIgOdiH3xqNPf3W/m0bzCk/6QLfTR3zUvVEThAAIhALvFV8z4ZBGPvaWkPFToUitbJo0kidnQgvvPFjHDa86X","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33345},"main":"./dist/index.js","type":"module","_from":"file:teliagen-react-0.4.0.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"private":false,"scripts":{"dev":"tsc --watch","test":"vitest run","build":"tsc"},"_npmUser":{"name":"teliagen_off","email":"admin@teliagen.org"},"_resolved":"C:\\Users\\ABDOUL~1\\AppData\\Local\\Temp\\cacad2f8f7b9191ba4ac4d44040c0f29\\teliagen-react-0.4.0.tgz","_integrity":"sha512-5yWwg5nZgDQFT0xhWiMkvQVQQW0X3Qzox/xq9PEVSiGzJUUkKzWKo9Cqy64Ox/DwTQJ0N85t0mjRXmRPJOw7Qg==","repository":{"url":"git+https://github.com/teliagen/teliagen-framework.git","type":"git","directory":"packages/react"},"_npmVersion":"11.6.2","description":"React integration for Teliagen Framework","directories":{},"_nodeVersion":"24.12.0","dependencies":{"@teliagen/client":"0.4.0","@tanstack/react-query":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^25.0.0","react":"^18.3.1","vitest":"^2.0.0","react-dom":"^18.3.1","typescript":"^5.7.3","@types/react":"^18.3.12","@testing-library/react":"^14.3.1"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react_0.4.0_1770857848833_0.7328584648088936","host":"s3://npm-registry-packages-npm-production"}},"0.4.1":{"name":"@teliagen/react","version":"0.4.1","author":{"name":"Teliagen Team","email":"contact@teliagen.org"},"license":"Apache-2.0","_id":"@teliagen/react@0.4.1","maintainers":[{"name":"teliagen_off","email":"admin@teliagen.org"}],"homepage":"https://docs.teliagen.org","bugs":{"url":"https://github.com/teliagen/teliagen-framework/issues"},"dist":{"shasum":"23378b5ef03af235446fec3ee34e685ee34d9f8a","tarball":"https://registry.npmjs.org/@teliagen/react/-/react-0.4.1.tgz","fileCount":8,"integrity":"sha512-jmVZitcg2PoS3jY3PVyMxlKmuFljBY3pnUvLqemTGcVPUnGPtHt0dcrnLvwYz5SQjOd13zs+Dfzr1znSYG/bhQ==","signatures":[{"sig":"MEYCIQD6Iz+sVAbtZP/RoHB+c444A2dOnQBvHSvNWdcZG11hiwIhALijhqLgiUucX235L53qGWnwGrJOLypXZPBMRSQEYKkp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33345},"main":"./dist/index.js","type":"module","_from":"file:teliagen-react-0.4.1.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"private":false,"scripts":{"dev":"tsc --watch","test":"vitest run","build":"tsc"},"_npmUser":{"name":"teliagen_off","email":"admin@teliagen.org"},"_resolved":"C:\\Users\\ABDOUL~1\\AppData\\Local\\Temp\\c642b0a204a4dfde63af1dd44d539219\\teliagen-react-0.4.1.tgz","_integrity":"sha512-jmVZitcg2PoS3jY3PVyMxlKmuFljBY3pnUvLqemTGcVPUnGPtHt0dcrnLvwYz5SQjOd13zs+Dfzr1znSYG/bhQ==","repository":{"url":"git+https://github.com/teliagen/teliagen-framework.git","type":"git","directory":"packages/react"},"_npmVersion":"11.6.2","description":"React integration for Teliagen Framework","directories":{},"_nodeVersion":"24.12.0","dependencies":{"@teliagen/client":"0.4.1","@tanstack/react-query":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^25.0.0","react":"^18.3.1","vitest":"^2.0.0","react-dom":"^18.3.1","typescript":"^5.7.3","@types/react":"^18.3.12","@testing-library/react":"^14.3.1"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react_0.4.1_1770923601865_0.21248375242397577","host":"s3://npm-registry-packages-npm-production"}},"0.4.2":{"name":"@teliagen/react","version":"0.4.2","private":false,"publishConfig":{"access":"public"},"type":"module","description":"React integration for Teliagen Framework","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"author":{"name":"Teliagen Team","email":"contact@teliagen.org"},"repository":{"type":"git","url":"git+https://github.com/teliagen/teliagen-framework.git","directory":"packages/react"},"homepage":"https://docs.teliagen.org","bugs":{"url":"https://github.com/teliagen/teliagen-framework/issues"},"license":"Apache-2.0","dependencies":{"@tanstack/react-query":"^5.0.0","@teliagen/client":"0.4.2"},"peerDependencies":{"react":">=18"},"devDependencies":{"@testing-library/react":"^14.3.1","@types/react":"^18.3.12","jsdom":"^25.0.0","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.3","vitest":"^2.0.0"},"scripts":{"build":"tsc","dev":"tsc --watch","test":"vitest run"},"_id":"@teliagen/react@0.4.2","_integrity":"sha512-66BLU65FsERI992paLEwujhlW9wl9SwCgU0L5gicaEHpanMcu7M949jbkWBruOyI1CjsXG6fNQSFiC8HWM4OgA==","_resolved":"C:\\Users\\ABDOUL~1\\AppData\\Local\\Temp\\78046728af4c9ebcb7a2e2374e1fff67\\teliagen-react-0.4.2.tgz","_from":"file:teliagen-react-0.4.2.tgz","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-66BLU65FsERI992paLEwujhlW9wl9SwCgU0L5gicaEHpanMcu7M949jbkWBruOyI1CjsXG6fNQSFiC8HWM4OgA==","shasum":"778ccfab0fd3b790524aa6a77cdca7d0b8bbdb44","tarball":"https://registry.npmjs.org/@teliagen/react/-/react-0.4.2.tgz","fileCount":8,"unpackedSize":33345,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCFiV2lrP6OsX0iuNjKLKoaX8i7kDmaKo/MMMOn5fGImgIgBgtUgDcvvQdKHAacW6cytg1XJ/xz5hGtufcTvsavcxw="}]},"_npmUser":{"name":"teliagen_off","email":"admin@teliagen.org"},"directories":{},"maintainers":[{"name":"teliagen_off","email":"admin@teliagen.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.4.2_1770925152029_0.1718900873087177"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-12T00:57:28.733Z","modified":"2026-02-12T19:39:12.337Z","0.1.0":"2026-01-19T19:17:31.516Z","0.1.1":"2026-01-19T19:55:56.919Z","0.1.2":"2026-01-19T21:14:43.259Z","0.1.3":"2026-01-19T21:27:31.357Z","0.1.4":"2026-01-25T07:46:59.894Z","0.1.5":"2026-01-25T16:04:30.731Z","0.1.6":"2026-01-25T23:50:35.616Z","0.1.7":"2026-01-26T00:07:40.734Z","0.1.8":"2026-01-26T00:11:10.658Z","0.1.9":"2026-01-26T00:14:43.523Z","0.1.10":"2026-01-26T00:18:54.813Z","0.1.11":"2026-01-26T00:40:17.200Z","0.1.12":"2026-01-26T00:52:56.802Z","0.1.13":"2026-01-26T00:57:11.349Z","0.1.15":"2026-01-26T01:17:38.530Z","0.1.16":"2026-01-26T01:22:08.141Z","0.1.17":"2026-01-26T01:43:10.968Z","0.1.18":"2026-01-26T02:17:51.815Z","0.1.19":"2026-01-26T02:26:14.408Z","0.4.0":"2026-02-12T00:57:28.988Z","0.4.1":"2026-02-12T19:13:22.031Z","0.4.2":"2026-02-12T19:39:12.193Z"},"bugs":{"url":"https://github.com/teliagen/teliagen-framework/issues"},"author":{"name":"Teliagen Team","email":"contact@teliagen.org"},"license":"Apache-2.0","homepage":"https://docs.teliagen.org","repository":{"type":"git","url":"git+https://github.com/teliagen/teliagen-framework.git","directory":"packages/react"},"description":"React integration for Teliagen Framework","maintainers":[{"name":"teliagen_off","email":"admin@teliagen.org"}],"readme":"# @teliagen/react\r\n\r\n> React hooks and components for Teliagen applications.\r\n\r\n[![npm version](https://img.shields.io/npm/v/@teliagen/react.svg)](https://www.npmjs.com/package/@teliagen/react)\r\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)\r\n[![React](https://img.shields.io/badge/React-18+-blue.svg)](https://reactjs.org/)\r\n[![License: Apache-2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\r\n\r\n## Overview\r\n\r\n`@teliagen/react` provides React integration for Teliagen applications:\r\n\r\n- **TeliagenProvider** – Context provider for configuration\r\n- **useTeliagenAction** – Hook for mutations (POST actions)\r\n- **useTeliagenQuery** – Hook for queries (GET-like actions)\r\n- **React Query Integration** – Built on @tanstack/react-query\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @teliagen/react @teliagen/client @tanstack/react-query\r\n# or\r\npnpm add @teliagen/react @teliagen/client @tanstack/react-query\r\n```\r\n\r\n## Quick Start\r\n\r\n### Setup Provider\r\n\r\n```tsx\r\n// main.tsx\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom/client';\r\nimport { TeliagenProvider } from '@teliagen/react';\r\nimport App from './App';\r\n\r\nReactDOM.createRoot(document.getElementById('root')!).render(\r\n  <TeliagenProvider config={{ baseUrl: 'http://localhost:3000/api' }}>\r\n    <App />\r\n  </TeliagenProvider>\r\n);\r\n```\r\n\r\n### Use Hooks\r\n\r\n```tsx\r\nimport { useTeliagenAction, useTeliagenQuery } from '@teliagen/react';\r\n\r\n// Query (for fetching data)\r\nfunction UserList() {\r\n  const { data, isLoading, error, refetch } = useTeliagenQuery<{}, User[]>(\r\n    'listUsers',\r\n    {},\r\n    {}\r\n  );\r\n\r\n  if (isLoading) return <div>Loading...</div>;\r\n  if (error) return <div>Error: {error.message}</div>;\r\n\r\n  return (\r\n    <ul>\r\n      {data?.map(user => (\r\n        <li key={user.id}>{user.name}</li>\r\n      ))}\r\n    </ul>\r\n  );\r\n}\r\n\r\n// Mutation (for creating/updating data)\r\nfunction CreateUserForm() {\r\n  const { execute, isLoading, isSuccess, data, error } = useTeliagenAction<\r\n    CreateUserInput,\r\n    User\r\n  >('createUser');\r\n\r\n  const handleSubmit = (formData: CreateUserInput) => {\r\n    execute(formData);\r\n  };\r\n\r\n  return (\r\n    <form onSubmit={e => {\r\n      e.preventDefault();\r\n      handleSubmit({ email: 'test@example.com', name: 'Test' });\r\n    }}>\r\n      {/* form fields */}\r\n      <button disabled={isLoading}>\r\n        {isLoading ? 'Creating...' : 'Create User'}\r\n      </button>\r\n      {isSuccess && <p>User created: {data?.name}</p>}\r\n      {error && <p>Error: {error.message}</p>}\r\n    </form>\r\n  );\r\n}\r\n```\r\n\r\n## API Reference\r\n\r\n### TeliagenProvider\r\n\r\n```tsx\r\ninterface TeliagenClientConfig {\r\n  baseUrl: string;\r\n  token?: string;\r\n  headers?: Record<string, string>;\r\n}\r\n\r\ninterface TeliagenProviderProps {\r\n  config: TeliagenClientConfig;\r\n  children: React.ReactNode;\r\n  queryClient?: QueryClient;  // Custom React Query client\r\n}\r\n\r\n<TeliagenProvider config={{ baseUrl: '/api' }}>\r\n  {children}\r\n</TeliagenProvider>\r\n```\r\n\r\n### useTeliagenAction\r\n\r\nFor mutations (create, update, delete operations):\r\n\r\n```tsx\r\nfunction useTeliagenAction<TInput, TOutput>(\r\n  actionName: string,\r\n  options?: {\r\n    server?: string;\r\n    module?: string;\r\n    provider?: string;\r\n  },\r\n  defaultInput?: TInput\r\n): {\r\n  execute: (input: TInput) => void;\r\n  executeAsync: (input: TInput) => Promise<TOutput>;\r\n  data: TOutput | undefined;\r\n  response: TOutput | undefined;\r\n  isLoading: boolean;\r\n  isSuccess: boolean;\r\n  isError: boolean;\r\n  error: Error | null;\r\n  reset: () => void;\r\n};\r\n```\r\n\r\n### useTeliagenQuery\r\n\r\nFor queries (read operations):\r\n\r\n```tsx\r\nfunction useTeliagenQuery<TInput, TOutput>(\r\n  actionName: string,\r\n  options: {\r\n    server?: string;\r\n    module?: string;\r\n    provider?: string;\r\n  },\r\n  input: TInput\r\n): {\r\n  data: TOutput | undefined;\r\n  response: TOutput | undefined;\r\n  isLoading: boolean;\r\n  isFetching: boolean;\r\n  isSuccess: boolean;\r\n  isError: boolean;\r\n  error: Error | null;\r\n  refetch: () => void;\r\n};\r\n```\r\n\r\n### useTeliagen\r\n\r\nAccess the transport directly:\r\n\r\n```tsx\r\nimport { useTeliagen } from '@teliagen/react';\r\n\r\nfunction MyComponent() {\r\n  const { transport, config } = useTeliagen();\r\n  \r\n  const handleAction = async () => {\r\n    const result = await transport.execute('myAction', { data: 'value' });\r\n  };\r\n}\r\n```\r\n\r\n## Usage Patterns\r\n\r\n### Form with Action\r\n\r\n```tsx\r\nimport { useTeliagenAction } from '@teliagen/react';\r\nimport { useState } from 'react';\r\n\r\ninterface LoginInput {\r\n  email: string;\r\n  password: string;\r\n}\r\n\r\ninterface LoginOutput {\r\n  user: User;\r\n  token: string;\r\n}\r\n\r\nfunction LoginForm() {\r\n  const [email, setEmail] = useState('');\r\n  const [password, setPassword] = useState('');\r\n  \r\n  const login = useTeliagenAction<LoginInput, LoginOutput>('login');\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    \r\n    try {\r\n      const result = await login.executeAsync({ email, password });\r\n      localStorage.setItem('token', result.token);\r\n      // Redirect...\r\n    } catch (error) {\r\n      // Error is also available in login.error\r\n    }\r\n  };\r\n\r\n  return (\r\n    <form onSubmit={handleSubmit}>\r\n      <input\r\n        type=\"email\"\r\n        value={email}\r\n        onChange={e => setEmail(e.target.value)}\r\n        placeholder=\"Email\"\r\n      />\r\n      <input\r\n        type=\"password\"\r\n        value={password}\r\n        onChange={e => setPassword(e.target.value)}\r\n        placeholder=\"Password\"\r\n      />\r\n      <button disabled={login.isLoading}>\r\n        {login.isLoading ? 'Logging in...' : 'Login'}\r\n      </button>\r\n      {login.error && <p className=\"error\">{login.error.message}</p>}\r\n    </form>\r\n  );\r\n}\r\n```\r\n\r\n### Data Table with Query\r\n\r\n```tsx\r\nimport { useTeliagenQuery } from '@teliagen/react';\r\n\r\ninterface ListUsersInput {\r\n  page: number;\r\n  limit: number;\r\n}\r\n\r\ninterface ListUsersOutput {\r\n  users: User[];\r\n  total: number;\r\n}\r\n\r\nfunction UserTable() {\r\n  const [page, setPage] = useState(1);\r\n  \r\n  const { data, isLoading, refetch } = useTeliagenQuery<\r\n    ListUsersInput,\r\n    ListUsersOutput\r\n  >(\r\n    'listUsers',\r\n    { module: 'users' },\r\n    { page, limit: 10 }\r\n  );\r\n\r\n  return (\r\n    <div>\r\n      <button onClick={() => refetch()}>Refresh</button>\r\n      \r\n      {isLoading ? (\r\n        <p>Loading...</p>\r\n      ) : (\r\n        <table>\r\n          <thead>\r\n            <tr>\r\n              <th>Name</th>\r\n              <th>Email</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            {data?.users.map(user => (\r\n              <tr key={user.id}>\r\n                <td>{user.name}</td>\r\n                <td>{user.email}</td>\r\n              </tr>\r\n            ))}\r\n          </tbody>\r\n        </table>\r\n      )}\r\n      \r\n      <div>\r\n        Total: {data?.total}\r\n        <button onClick={() => setPage(p => p - 1)} disabled={page === 1}>\r\n          Previous\r\n        </button>\r\n        <button onClick={() => setPage(p => p + 1)}>\r\n          Next\r\n        </button>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Cross-Service Call\r\n\r\n```tsx\r\nfunction PaymentButton({ orderId }: { orderId: string }) {\r\n  const processPayment = useTeliagenAction<PaymentInput, PaymentResult>(\r\n    'processPayment',\r\n    { server: 'payments' }  // Call payments service\r\n  );\r\n\r\n  return (\r\n    <button\r\n      onClick={() => processPayment.execute({ orderId })}\r\n      disabled={processPayment.isLoading}\r\n    >\r\n      {processPayment.isLoading ? 'Processing...' : 'Pay Now'}\r\n    </button>\r\n  );\r\n}\r\n```\r\n\r\n## Custom Query Client\r\n\r\n```tsx\r\nimport { QueryClient } from '@tanstack/react-query';\r\nimport { TeliagenProvider } from '@teliagen/react';\r\n\r\nconst queryClient = new QueryClient({\r\n  defaultOptions: {\r\n    queries: {\r\n      staleTime: 5 * 60 * 1000,  // 5 minutes\r\n      retry: 3\r\n    }\r\n  }\r\n});\r\n\r\nfunction App() {\r\n  return (\r\n    <TeliagenProvider \r\n      config={{ baseUrl: '/api' }}\r\n      queryClient={queryClient}\r\n    >\r\n      {/* ... */}\r\n    </TeliagenProvider>\r\n  );\r\n}\r\n```\r\n\r\n## With Generated Types\r\n\r\nUse [@teliagen/vite-plugin](../vite-plugin) to generate typed hooks:\r\n\r\n```tsx\r\n// Generated: .teliagen-client/main/hooks/useLogin.ts\r\nimport { useLogin } from '.teliagen-client/main';\r\n\r\nfunction LoginPage() {\r\n  const login = useLogin();\r\n  \r\n  // login.execute() is fully typed!\r\n  login.execute({ email: 'user@example.com', password: 'secret' });\r\n}\r\n```\r\n\r\n## Requirements\r\n\r\n- **React** >= 18.0.0\r\n- **@tanstack/react-query** >= 5.0.0\r\n\r\n## Related Packages\r\n\r\n- **[@teliagen/client](../client)** – Core HTTP transport\r\n- **[@teliagen/vite-plugin](../vite-plugin)** – Vite plugin for code generation\r\n\r\n## Documentation\r\n\r\nFor full documentation, visit [docs.teliagen.org](https://docs.teliagen.org).\r\n\r\n## License\r\n\r\nApache-2.0\r\n\r\n---\r\n\r\n<p align=\"center\">\r\n  <strong>Part of <a href=\"https://github.com/teliagen/teliagen-framework\">Teliagen</a></strong>\r\n</p>\r\n","readmeFilename":"README.md"}