diff --git a/README.md b/README.md index 01e94bc..3c59b70 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,73 @@ export const routes: RouteRecord[] = [ ] ``` +## Document head + +You can use `
` to manage all of your changes to the document head. It takes plain HTML tags and outputs plain HTML tags. It is a wrapper around [React Helmet](https://github.com/nfl/react-helmet). + +```tsx +import { Head } from 'vite-react-ssg' + +const MyHead = () => ( +
+ + +
+
+
+)
+```
+
+Nested or latter components will override duplicate usages:
+
+```tsx
+import { Head } from 'vite-react-ssg'
+
+const MyHead = () => (
+
+
+ + +``` + +### Reactive head + +```tsx +import { useState } from 'react' +import { Head } from 'vite-react-ssg' + +export default function MyHead() { + const [state, setState] = useState(false) + + return ( +
+ + +
+ {/* You can also set the 'body' attributes here */} +
+
+ )
+}
+```
+
## Critical CSS
Vite SSG has built-in support for generating [Critical CSS](https://web.dev/extract-critical-css/) inlined in the HTML via the [`critters`](https://github.com/GoogleChromeLabs/critters) package.
@@ -162,9 +229,9 @@ export default {
## Roadmap
- [x] Preload assets
+- [x] Document head
- [ ] SSR under dev
- [ ] Initial State
-- [ ] Document head
- [ ] More Client components, such as `