rick-ui-package
v1.0.0
Published
## Table of contents
Readme
Package Guideline
Table of contents
ThemeSlice integration instruction
SSR
Pass ThemeSlice to redux-toolkit
configureStorefunction.// store/index.ts import { ThemeSlice } from '@premia/ui'; const store = configureStore({ reducer: { [ThemeSlice.name]: ThemeSlice.reducer, }, });Now you can have access to the theme using the
useThemehook exported from@premia/ui. Also to prefill redux with the persisted value of the theme from cookies, place theuseApplyPersistedThemehook in the first decent layer of the Redux provider like in the default layout. (We are doing this as a side effect to prevent SSR hydration issues)// component.tsx import { useTheme } from '@premia/ui';// layouts/DefaultLayout.tsx import { useApplyPersistedTheme } from '@premia/ui'; interface Props { children?: ReactNode; } export const DefaultLayout: React.FC<Props> = ({ children }) => { useApplyPersistedTheme(); return <>{children}</>; };Update your HTML tag to contain the default theme class.
<Html className={Theme.dark}>
SPA
Do everything as
SSR/SSGexcept that you must not use theuseApplyPersistedThemehook. instead, apply the following modifications to prefill redux with the persisted value of the theme from cookies.// store/index.ts import { applyThemeOnHTML, getThemeFromCookie, ThemeSlice, } from '@premia/ui'; const persistedTheme = getThemeFromCookie(); applyThemeOnHTML(persistedTheme); export const store = configureStore({ reducer: { [ThemeSlice.name]: ThemeSlice.reducer, }, preloadedState: { theme: { value: persistedTheme, }, }, });