@lapi-os/react-toolkit
v1.0.3
Published
A set of functions, components and hooks shared by front ends
Readme
@lapi-os/react-toolkit
A shared React library providing hooks, components, and utilities for interacting with a backend API. Built on TanStack React Query, React Router, and shadcn/ui.
Installation
npm install @lapi-os/react-toolkitSetup
Initialize the toolkit
Call loadLapiReactToolkitData once at your app entry point before rendering anything.
import { loadLapiReactToolkitData } from '@lapi-os/react-toolkit/shared'
import { QueryClient } from '@tanstack/react-query'
const queryClient = new QueryClient()
loadLapiReactToolkitData({
host: 'https://api.example.com',
localStorageKeys: { auth_token: 'atk' },
queryClient,
queryKeyPrefix: 'my-app',
})| Option | Type | Description |
|---|---|---|
| host | string | Base URL of your backend API |
| localStorageKeys.auth_token | string | localStorage key where the auth token is stored |
| queryClient | QueryClient | Your app's QueryClient instance |
| queryKeyPrefix | string | Prefix for all React Query cache keys |
Wrap your app
Wrap your root with ProviderBackendQuery to provide the QueryClient to all components:
import { ProviderBackendQuery } from '@lapi-os/react-toolkit/components'
export default function App() {
return (
<ProviderBackendQuery>
<YourApp />
</ProviderBackendQuery>
)
}Tailwind CSS
Add this to your app.css so Tailwind v4 picks up styles from the library:
@source "../node_modules/@lapi-os/react-toolkit/dist/**/*.js";Styles & Theming
Import the base styles and pick a theme in your app's CSS entry point:
@import '@lapi-os/react-toolkit/ui/styles.css';
@import '@lapi-os/react-toolkit/ui/themes/lapi.css';Three themes are available — switching is a one-line change:
| Theme | Import | Font |
|---|---|---|
| lapi | @lapi-os/react-toolkit/ui/themes/lapi.css | Avgard (bundled) |
| labbe | @lapi-os/react-toolkit/ui/themes/labbe.css | Montserrat |
| ludy | @lapi-os/react-toolkit/ui/themes/ludy.css | Nunito |
Toast notifications
Add Toaster to your root layout once to enable toasts app-wide:
import { Toaster } from '@lapi-os/react-toolkit/ui/sonner'
import { toast } from 'sonner'
// In your layout:
<body>
{children}
<Toaster />
</body>
// Trigger from anywhere:
toast.success('Saved')
toast.error('Something went wrong')