LoopKitFrontend
Provider Setup
Configure the LoopKit React context provider
LoopKitProvider
All LoopKit hooks require the LoopKitProvider to be mounted in your component tree.
import { LoopKitProvider } from '@loopkit/react';
import '@loopkit/react/styles.css';
function App() {
return (
<LoopKitProvider apiUrl="/api/loopkit">
<YourApp />
</LoopKitProvider>
);
}Props
interface LoopKitProviderProps {
apiUrl: string; // Base URL for the LoopKit API
fetcher?: typeof fetch; // Custom fetch function
children: ReactNode;
}| Prop | Type | Required | Description |
|---|---|---|---|
apiUrl | string | Yes | Base URL for all API requests (e.g., /api/loopkit) |
fetcher | typeof fetch | No | Custom fetch for auth headers, interceptors |
children | ReactNode | Yes | Your application |
Custom Fetcher
Use a custom fetcher to add authentication headers:
const authenticatedFetch: typeof fetch = (input, init) => {
return fetch(input, {
...init,
headers: {
...init?.headers,
Authorization: `Bearer ${getToken()}`,
},
});
};
<LoopKitProvider apiUrl="/api/loopkit" fetcher={authenticatedFetch}>
<App />
</LoopKitProvider>useLoopKitConfig
Access the provider configuration from any child component:
import { useLoopKitConfig } from '@loopkit/react';
function MyComponent() {
const { apiUrl, fetcher } = useLoopKitConfig();
// ...
}Throws if used outside of a <LoopKitProvider>.