{"id":15981,"library":"chayns-api","title":"chayns API for React","description":"The `chayns-api` package provides a React-centric interface for integrating applications with the chayns platform. It offers a comprehensive set of React hooks and utility functions to access chayns-specific information and functionalities, such as user data, location details, and various platform services. Currently stable at version 2.6.14, the library appears to be actively maintained, with regular updates indicated by its versioning and migration guides between major versions. Its primary differentiator is its deep integration with the chayns ecosystem, abstracting the complexities of the underlying platform API into idiomatic React patterns, making development for chayns applications more streamlined compared to direct API interactions. It requires `react` and `react-dom` as peer dependencies.","status":"active","version":"2.6.14","language":"javascript","source_language":"en","source_url":"https://github.com/TobitSoftware/chayns-api","tags":["javascript","chayns","chayns-toolkit","react","typescript"],"install":[{"cmd":"npm install chayns-api","lang":"bash","label":"npm"},{"cmd":"yarn add chayns-api","lang":"bash","label":"yarn"},{"cmd":"pnpm add chayns-api","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for any React application using this library.","package":"react","optional":false},{"reason":"Required as a peer dependency for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"A named export component that must wrap your application to provide chayns context to hooks and functions.","wrong":"const ChaynsProvider = require('chayns-api').ChaynsProvider","symbol":"ChaynsProvider","correct":"import { ChaynsProvider } from 'chayns-api'"},{"note":"A named export React hook for accessing the current chayns user's information within a component.","wrong":"import useUser from 'chayns-api'","symbol":"useUser","correct":"import { useUser } from 'chayns-api'"},{"note":"A utility function for initializing Module Federation sharing, often required early in the application lifecycle when migrating to v2 and using ChaynsHost with module-type.","wrong":"const initModuleFederationSharing = require('chayns-api').initModuleFederationSharing","symbol":"initModuleFederationSharing","correct":"import { initModuleFederationSharing } from 'chayns-api'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { ChaynsProvider, useUser, initModuleFederationSharing } from 'chayns-api';\n\n// For applications utilizing ChaynsHost with module-type in v2+,\n// it might be necessary to call initModuleFederationSharing early in your app.\n// This is typically done in your entry point (e.g., index.ts/js or bootstrap.ts/js).\n// Example: // initModuleFederationSharing({ name: 'your-project-name' });\n\nconst UserDisplay: React.FC = () => {\n    const user = useUser();\n\n    if (!user) {\n        return <p>Authenticating with chayns...</p>;\n    }\n\n    return (\n        <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>\n            <h2>chayns User Profile</h2>\n            <p><strong>First Name:</strong> {user.firstName || 'N/A'}</p>\n            <p><strong>Last Name:</strong> {user.lastName || 'N/A'}</p>\n            <p><strong>Person ID:</strong> {user.personId}</p>\n            <p><strong>Location ID:</strong> {user.locationId}</p>\n            <p><strong>Admin Mode:</strong> {user.adminMode ? 'Yes' : 'No'}</p>\n            <p><strong>Is logged in:</strong> {user.loggedIn ? 'Yes' : 'No'}</p>\n        </div>\n    );\n};\n\nconst App: React.FC = () => (\n    <ChaynsProvider>\n        <UserDisplay />\n    </ChaynsProvider>\n);\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n    const root = ReactDOM.createRoot(rootElement);\n    root.render(\n        <React.StrictMode>\n            <App />\n        </React.StrictMode>\n    );\n} else {\n    console.error(\"Root element with ID 'root' not found.\");\n}\n","lang":"typescript","description":"Demonstrates setting up the `ChaynsProvider` to enable chayns functionalities and using the `useUser` hook to display the current chayns user's profile information within a React component. It also hints at the `initModuleFederationSharing` function for v2+ migrations."},"warnings":[{"fix":"Upgrade `chayns-toolkit` to `>=3.0.1`. Replace all instances of `remoteEntry.js` with `v2.remoteEntry.js` in your application's configuration and code.","message":"When migrating to `chayns-api` v2, you must also update `chayns-toolkit` to version `3.0.1` or higher. Additionally, URLs referencing `remoteEntry.js` must be updated to `v2.remoteEntry.js`.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Add `initModuleFederationSharing({ name: 'your_project_name' });` as early as possible in your application's entry point, replacing `'your_project_name'` with your actual project identifier.","message":"Applications using `ChaynsHost` with a module-type in `chayns-api` v2+ might need to call `initModuleFederationSharing({ name: 'project_name' })` early in the application lifecycle (e.g., in `index`/`bootstrap` files) to ensure proper Module Federation.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"This warning can be safely ignored as `chayns-api` includes a fallback to the React 17 API. For a clean console, consider upgrading your project to React 18.","message":"A warning \"Can't resolve 'react-dom/client'\" may appear when using `chayns-api` with React 17. This occurs because the library attempts to import React 18's client API.","severity":"gotcha","affected_versions":">=2.0.0 <18.0.0-rc"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"This warning can be safely ignored as the library falls back to React 17's API. To remove the warning, upgrade your project to React 18 or higher.","cause":"Using `chayns-api` v2+ with React 17, which triggers a warning because `chayns-api` attempts to import `react-dom/client` (a React 18 feature).","error":"Can't resolve 'react-dom/client'"},{"fix":"Ensure all URLs referencing `remoteEntry.js` in your application configuration (e.g., webpack, ChaynsHost settings) have been updated to `v2.remoteEntry.js`.","cause":"This error or similar module loading failures often occur after migrating to `chayns-api` v2 due to incorrect paths for the Module Federation entry file.","error":"Failed to load module script: The server responded with a non-JavaScript MIME type of \"\". Strict MIME type checking is enabled for module scripts."}],"ecosystem":"npm"}