Rick-ui-package NPM

Package Guideline

ThemeSlice integration instruction
- SSR
- SPA

ThemeSlice integration instruction

SSR

Pass ThemeSlice to redux-toolkit configureStore function.

// 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 useTheme hook exported from @premia/ui. Also to prefill redux with the persisted value of the theme from cookies, place the useApplyPersistedTheme hook 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/SSG except that you must not use the useApplyPersistedTheme hook. 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,
    },
  },
});

rick-ui-package v1.0.0

Package Guideline

Table of contents

ThemeSlice integration instruction

SSR

SPA