@unhead/react 2.0.14 → 2.0.17

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.
Files changed (2) hide show
  1. package/README.md +206 -0
  2. package/package.json +3 -2
package/README.md ADDED
@@ -0,0 +1,206 @@
1
+ # @unhead/react
2
+
3
+ > Full-stack `<head>` management for React applications
4
+
5
+ [![npm version][npm-version-src]][npm-version-href]
6
+ [![npm downloads][npm-downloads-src]][npm-downloads-href]
7
+ [![License][license-src]][license-href]
8
+
9
+ ## Features
10
+
11
+ - ⚛️ React-optimized head management
12
+ - 🪝 React hooks integration
13
+ - 🔄 Reactive titles, meta tags, and other head elements
14
+ - 🔍 SEO-friendly head control
15
+ - 🖥️ Server-side rendering support
16
+ - 📦 Lightweight with zero dependencies (except for React & unhead)
17
+
18
+ ## Installation
19
+
20
+ ```bash
21
+ # npm
22
+ npm install @unhead/react
23
+
24
+ # yarn
25
+ yarn add @unhead/react
26
+
27
+ # pnpm
28
+ pnpm add @unhead/react
29
+ ```
30
+
31
+ ## Usage
32
+
33
+ ### Setup
34
+
35
+ #### Client-side (SPA)
36
+
37
+ ```jsx
38
+ import { createHead, UnheadProvider } from '@unhead/react/client'
39
+ // main.jsx
40
+ import { StrictMode } from 'react'
41
+ import { createRoot } from 'react-dom/client'
42
+ import App from './App'
43
+
44
+ const head = createHead({ /* config */ })
45
+
46
+ createRoot(document.getElementById('root')).render(
47
+ <StrictMode>
48
+ <UnheadProvider head={head}>
49
+ <App />
50
+ </UnheadProvider>
51
+ </StrictMode>
52
+ )
53
+ ```
54
+
55
+ #### Server-side (SSR)
56
+
57
+ ```jsx
58
+ import { createHead, UnheadProvider } from '@unhead/react/server'
59
+ // entry-server.jsx
60
+ import { StrictMode } from 'react'
61
+ import { renderToString } from 'react-dom/server'
62
+ import App from './App'
63
+
64
+ export function render(url) {
65
+ const head = createHead()
66
+ const html = renderToString(
67
+ <StrictMode>
68
+ <UnheadProvider value={head}>
69
+ <App />
70
+ </UnheadProvider>
71
+ </StrictMode>
72
+ )
73
+ return { html, head }
74
+ }
75
+ ```
76
+
77
+ ```jsx
78
+ import { createHead, UnheadProvider } from '@unhead/react/client'
79
+ // entry-client.jsx (for hydration)
80
+ import { StrictMode } from 'react'
81
+ import { hydrateRoot } from 'react-dom/client'
82
+ import App from './App'
83
+
84
+ const head = createHead({ /* config */ })
85
+
86
+ hydrateRoot(
87
+ document.getElementById('root'),
88
+ <StrictMode>
89
+ <UnheadProvider head={head}>
90
+ <App />
91
+ </UnheadProvider>
92
+ </StrictMode>
93
+ )
94
+ ```
95
+
96
+ ### Basic Usage
97
+
98
+ ```jsx
99
+ // Home.jsx
100
+ import { useHead } from '@unhead/react'
101
+
102
+ function Home() {
103
+ useHead({
104
+ title: 'Home Page',
105
+ meta: [
106
+ {
107
+ name: 'description',
108
+ content: 'Welcome to our website'
109
+ }
110
+ ]
111
+ })
112
+
113
+ return <h1>Home</h1>
114
+ }
115
+
116
+ export default Home
117
+ ```
118
+
119
+ ### Setting Meta Tags
120
+
121
+ ```jsx
122
+ // About.jsx
123
+ import { useSeoMeta } from '@unhead/react'
124
+
125
+ function About() {
126
+ useSeoMeta({
127
+ title: 'About Us',
128
+ description: 'Learn more about our company',
129
+ ogTitle: 'About Our Company',
130
+ ogDescription: 'Our fantastic about page',
131
+ ogImage: 'https://example.com/image.jpg',
132
+ })
133
+
134
+ return <h1>About Us</h1>
135
+ }
136
+
137
+ export default About
138
+ ```
139
+
140
+ ### Reactive Head Elements
141
+
142
+ ```jsx
143
+ import { useHead } from '@unhead/react'
144
+ // Profile.jsx
145
+ import { useEffect, useState } from 'react'
146
+
147
+ function Profile() {
148
+ const [userName, setUserName] = useState('User')
149
+
150
+ // Create a head entry that can be patched
151
+ const headEntry = useHead()
152
+
153
+ useEffect(() => {
154
+ headEntry.patch({
155
+ title: `${userName} - Profile`, // Reactive title
156
+ meta: [
157
+ {
158
+ name: 'description',
159
+ content: `${userName}'s profile page`, // Reactive description
160
+ },
161
+ ],
162
+ })
163
+ }, [userName, headEntry])
164
+
165
+ return (
166
+ <div>
167
+ <h1>
168
+ {userName}
169
+ 's Profile
170
+ </h1>
171
+ <button onClick={() => setUserName('New Name')}>
172
+ Update Name
173
+ </button>
174
+ </div>
175
+ )
176
+ }
177
+
178
+ export default Profile
179
+ ```
180
+
181
+ ## Development
182
+
183
+ ```bash
184
+ # Install dependencies
185
+ npm install
186
+
187
+ # Generate build files
188
+ npm run build
189
+
190
+ # Run tests
191
+ npm run test
192
+ ```
193
+
194
+ ## License
195
+
196
+ [MIT](./LICENSE)
197
+
198
+ <!-- Badges -->
199
+ [npm-version-src]: https://img.shields.io/npm/v/@unhead/react/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
200
+ [npm-version-href]: https://npmjs.com/package/@unhead/react
201
+
202
+ [npm-downloads-src]: https://img.shields.io/npm/dm/@unhead/react.svg?style=flat&colorA=18181B&colorB=28CF8D
203
+ [npm-downloads-href]: https://npmjs.com/package/@unhead/react
204
+
205
+ [license-src]: https://img.shields.io/github/license/unjs/unhead.svg?style=flat&colorA=18181B&colorB=28CF8D
206
+ [license-href]: https://github.com/unjs/unhead/blob/main/LICENSE
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@unhead/react",
3
3
  "type": "module",
4
- "version": "2.0.14",
4
+ "version": "2.0.17",
5
+ "description": "Full-stack <head> manager built for React.",
5
6
  "author": "Harlan Wilton <harlan@harlanzw.com>",
6
7
  "license": "MIT",
7
8
  "funding": "https://github.com/sponsors/harlan-zw",
@@ -69,7 +70,7 @@
69
70
  ]
70
71
  },
71
72
  "dependencies": {
72
- "unhead": "2.0.14"
73
+ "unhead": "2.0.17"
73
74
  },
74
75
  "devDependencies": {
75
76
  "@testing-library/react": "^16.3.0",