CourseKitFrontend
Provider Setup
Configure the CourseKit React context provider
CourseKitProvider
All CourseKit hooks require the CourseKitProvider to be mounted in your component tree.
import { CourseKitProvider } from '@hfu.digital/coursekit-react';
function App() {
return (
<CourseKitProvider apiUrl="/api/coursekit">
<YourApp />
</CourseKitProvider>
);
}Props
interface CourseKitConfig {
apiUrl: string;
/** Optional: custom fetch function for auth headers, etc. */
fetch?: typeof globalThis.fetch;
}| Prop | Type | Required | Description |
|---|---|---|---|
apiUrl | string | Yes | Base URL for all API requests (e.g., /api/coursekit) |
fetch | typeof fetch | No | Custom fetch for auth headers, interceptors |
children | ReactNode | Yes | Your application |
Custom Fetch
Use a custom fetch function to add authentication headers:
const authenticatedFetch: typeof fetch = (input, init) => {
return fetch(input, {
...init,
headers: {
...init?.headers,
Authorization: `Bearer ${getToken()}`,
},
});
};
<CourseKitProvider
apiUrl="https://api.example.com/coursekit"
fetch={authenticatedFetch}
>
<App />
</CourseKitProvider>useCourseKitConfig
Access the provider configuration from any child component:
import { useCourseKitConfig } from '@hfu.digital/coursekit-react';
function MyComponent() {
const { apiUrl, fetch } = useCourseKitConfig();
// ...
}Throws if used outside of a <CourseKitProvider>.