chayns API for React

Common errors

• Can't resolve 'react-dom/client'

  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).
  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.

• Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enabled for module scripts.

  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.
  fix Ensure all URLs referencing `remoteEntry.js` in your application configuration (e.g., webpack, ChaynsHost settings) have been updated to `v2.remoteEntry.js`.

Warnings

• breaking 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`.
  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.
• breaking 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.
  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.
• gotcha 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.
  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.

Install

• npm install chayns-api npm
• yarn add chayns-api yarn
• pnpm add chayns-api pnpm

Imports

• ChaynsProvider
  wrong:

  const ChaynsProvider = require('chayns-api').ChaynsProvider

  correct:

  import { ChaynsProvider } from 'chayns-api'

  A named export component that must wrap your application to provide chayns context to hooks and functions.
• useUser
  wrong:

  import useUser from 'chayns-api'

  correct:

  import { useUser } from 'chayns-api'

  A named export React hook for accessing the current chayns user's information within a component.
• initModuleFederationSharing
  wrong:

  const initModuleFederationSharing = require('chayns-api').initModuleFederationSharing

  correct:

  import { initModuleFederationSharing } from 'chayns-api'

  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.

Quickstart

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.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChaynsProvider, useUser, initModuleFederationSharing } from 'chayns-api';

// For applications utilizing ChaynsHost with module-type in v2+,
// it might be necessary to call initModuleFederationSharing early in your app.
// This is typically done in your entry point (e.g., index.ts/js or bootstrap.ts/js).
// Example: // initModuleFederationSharing({ name: 'your-project-name' });

const UserDisplay: React.FC = () => {
    const user = useUser();

    if (!user) {
        return <p>Authenticating with chayns...</p>;
    }

    return (
        <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
            <h2>chayns User Profile</h2>
            <p><strong>First Name:</strong> {user.firstName || 'N/A'}</p>
            <p><strong>Last Name:</strong> {user.lastName || 'N/A'}</p>
            <p><strong>Person ID:</strong> {user.personId}</p>
            <p><strong>Location ID:</strong> {user.locationId}</p>
            <p><strong>Admin Mode:</strong> {user.adminMode ? 'Yes' : 'No'}</p>
            <p><strong>Is logged in:</strong> {user.loggedIn ? 'Yes' : 'No'}</p>
        </div>
    );
};

const App: React.FC = () => (
    <ChaynsProvider>
        <UserDisplay />
    </ChaynsProvider>
);

const rootElement = document.getElementById('root');
if (rootElement) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>
    );
} else {
    console.error("Root element with ID 'root' not found.");
}