@kbach/react 0.6.50 → 0.6.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -38,7 +38,7 @@ That's the only setting needed — Vite, Next.js, and React Router all read it.
|
|
|
38
38
|
|---|---|
|
|
39
39
|
| Vite, React Router library mode, CRA, other Vite-based | **[Static CSS setup](#static-css-setup)** (recommended) — zero runtime cost, catches typos at build time. [Runtime setup](#runtime-setup) is there if you'd rather skip the plugin for now. |
|
|
40
40
|
| React Router, framework mode | **[Static CSS setup](#static-css-setup)** — and skip `@vitejs/plugin-react`, see note in that section |
|
|
41
|
-
| Next.js | **[
|
|
41
|
+
| Next.js | **[Next.js setup](#nextjs-setup)** — Runtime setup, plus one App Router-specific detail |
|
|
42
42
|
| React Native, Expo | **[React Native / Expo setup](#react-native--expo-setup)** — different setup entirely (Babel preset, not the JSX runtime step above) |
|
|
43
43
|
|
|
44
44
|
## Static CSS setup
|
|
@@ -99,7 +99,7 @@ export default defineConfig({ plugins: [kbach(), reactRouter()] });
|
|
|
99
99
|
|
|
100
100
|
## Runtime setup
|
|
101
101
|
|
|
102
|
-
Client-side CSS injection — works with any bundler (Vite, webpack, Turbopack, Metro-for-web, …), no build plugin.
|
|
102
|
+
Client-side CSS injection — works with any bundler (Vite, webpack, Turbopack, Metro-for-web, …), no build plugin. Next.js always uses this (see [Next.js setup](#nextjs-setup) below for the one extra detail), or use it on Vite if you'd rather not wire up the plugin yet. This is the whole setup:
|
|
103
103
|
|
|
104
104
|
```jsx
|
|
105
105
|
import { ThemeProvider, KbachReset } from '@kbach/react';
|
|
@@ -114,12 +114,40 @@ export default function Root() {
|
|
|
114
114
|
}
|
|
115
115
|
```
|
|
116
116
|
|
|
117
|
-
That's it — done. `<KbachReset />` renders the base reset (see [CSS resets](#css-resets)) as real markup instead of waiting on client JS — matters most for SSR, where it avoids a flash of unstyled browser defaults before hydration.
|
|
117
|
+
That's it — done. `<KbachReset />` renders the base reset (see [CSS resets](#css-resets)) as real markup instead of waiting on client JS — matters most for SSR, where it avoids a flash of unstyled browser defaults before hydration.
|
|
118
118
|
|
|
119
119
|
Using a custom `kbach.config.js`? Pass it to `ThemeProvider` too — see [Wiring the config in](#wiring-the-config-in--required-for-both-setups).
|
|
120
120
|
|
|
121
121
|
Don't also set up Static CSS above in the same app — pick one.
|
|
122
122
|
|
|
123
|
+
## Next.js setup
|
|
124
|
+
|
|
125
|
+
Next.js is always [Runtime setup](#runtime-setup) above — Static CSS doesn't apply (webpack/Turbopack, not Vite). The `tsconfig.json` step from [Setup](#setup) applies as-is; SWC reads `jsxImportSource` the same way Vite does.
|
|
126
|
+
|
|
127
|
+
The one Next.js-specific detail: render `<KbachReset />` once in the root App Router `layout.tsx` (inside `<head>`, or right after `<ThemeProvider>` opens) so the Server Component HTML has the base reset without waiting on hydration:
|
|
128
|
+
|
|
129
|
+
```jsx
|
|
130
|
+
// app/layout.tsx
|
|
131
|
+
import { ThemeProvider, KbachReset } from '@kbach/react';
|
|
132
|
+
|
|
133
|
+
export default function RootLayout({ children }) {
|
|
134
|
+
return (
|
|
135
|
+
<html lang="en">
|
|
136
|
+
<body>
|
|
137
|
+
<ThemeProvider defaultMode="system">
|
|
138
|
+
<KbachReset />
|
|
139
|
+
{children}
|
|
140
|
+
</ThemeProvider>
|
|
141
|
+
</body>
|
|
142
|
+
</html>
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
Without `<KbachReset />` there, expect a flash of raw browser defaults (native button border, arrow-less `<select>`, etc.) on first paint until hydration completes. Utility classes beyond the base reset still wait on hydration either way — a known limitation of the runtime-only path (Static CSS isn't available for webpack/Turbopack), not a per-project bug.
|
|
148
|
+
|
|
149
|
+
`@kbach/react`'s compiled output ships its own `"use client"` directive, so App Router Server Components can use `className`, `styled()`, hooks, `<ThemeProvider>`, and `<KbachReset>` directly — no manual `'use client'` wrapper needed anywhere in your own components.
|
|
150
|
+
|
|
123
151
|
## React Native / Expo setup
|
|
124
152
|
|
|
125
153
|
Same `npm install @kbach/react` — no separate package. Everything below (API, modifiers, color system) is the same import as web; only setup differs.
|