Commit db23d0d 1 parent 4a5289b commit db23d0d Copy full SHA for db23d0d
File tree 2 files changed +0
-56
lines changed
2 files changed +0
-56
lines changed Original file line number Diff line number Diff line change 19
19
fetch-depth : 2
20
20
21
21
- uses : pnpm/action-setup@v4
22
- with :
23
- version : 8
24
22
25
23
- uses : actions/setup-node@v4
26
24
with :
Original file line number Diff line number Diff line change @@ -199,57 +199,3 @@ themeStore.sync() // useful for syncing theme selection across tabs and windows
199
199
const unsubscribe = themeStore .subscribe ((themes , resolvedThemes ) => { /* ... */ })
200
200
themeStore .destroy ()
201
201
```
202
-
203
- ## React Integration
204
-
205
- ### Client-only persistence
206
-
207
- Ensure that you have initialized Palettez as per instructions under [ Basic Usage] ( #basic-usage ) . As theme selection is only known on the client, you should only render component with ` usePalettez ` once the app has mounted.
208
-
209
- ``` tsx
210
- import * as React from ' react'
211
- import { usePalettez } from ' palettez/react'
212
-
213
- function Component() {
214
- const [mounted, setMounted] = useState (false )
215
-
216
- useEffect (() => {
217
- setMounted (true )
218
- }, [])
219
-
220
- return mounted ? <ThemeSelect /> : null
221
- }
222
-
223
- function ThemeSelect() {
224
- const {
225
- themesAndOptions,
226
- themes,
227
- setThemes,
228
-
229
- getResolvedThemes,
230
- restore,
231
- sync,
232
- subscribe,
233
- } = usePalettez (window .palettez .getThemeStore ())
234
-
235
- return themesAndOptions .map ((theme ) => (
236
- <div key = { theme .key } >
237
- <label htmlFor = { theme .key } >{ theme .label } </label >
238
- <select
239
- id = { theme .key }
240
- name = { theme .key }
241
- onChange = { (e ) => {
242
- setThemes ({ [theme .key ]: e .target .value })
243
- }}
244
- value = { themes [theme .key ]}
245
- >
246
- { theme .options .map ((option ) => (
247
- <option key = { option .key } value = { option .key } >
248
- { option .value }
249
- </option >
250
- ))}
251
- </select >
252
- </div >
253
- ))
254
- }
255
- ```
You can’t perform that action at this time.
0 commit comments