@learner-profile/ui-components

A library of shared React components with RTK Query integration.

Installation

npm install @learner-profile/ui-components

Usage

API Provider Setup

import { ApiProvider } from "@learner-profile/ui-components";

const App = () => {
  const config = {
    api: {
      baseUrl: "https://api.example.com",
      headers: {
        "Content-Type": "application/json",
      },
    },
    auth: {
      tokenKey: "auth_token",
      getToken: () => localStorage.getItem("auth_token"),
      onAuthError: (error) => {
        console.error("Authentication error", error);
        // Redirect to login or refresh token
      },
    },
  };

  return (
    <ApiProvider config={config}>
      {/* Your application components here */}
    </ApiProvider>
  );
};

Creating a Custom API

import { createApi } from "@learner-profile/ui-components";

const api = createApi({
  reducerPath: "userApi",
  baseQuery: {
    baseUrl: "https://api.example.com/users",
    prepareHeaders: (headers) => {
      const token = localStorage.getItem("auth_token");
      if (token) {
        headers.set("Authorization", `Bearer ${token}`);
      }
      return headers;
    },
  },
  endpoints: (builder) => ({
    // Define your endpoints here
  }),
});

Features

• Configurable API base URLs
• Authentication token handling
• Isolated Redux stores per component
• TypeScript support

License

MIT

learner-profile