|
3 | 3 | Follow these steps to use @interchain-ui/react:
|
4 | 4 |
|
5 | 5 | - Install: `yarn add @interchain-ui/react`
|
6 |
| -- Create a custom hook to consume our theme store: |
7 |
| - |
8 |
| -```TS |
9 |
| -// use-theme.tsx |
10 |
| - |
11 |
| -import { ModePreference, store } from '@interchain-ui/react'; |
12 |
| -import { useCallback, useMemo } from 'react'; |
13 |
| -import { create } from 'zustand'; |
14 |
| -import { shallow } from 'zustand/shallow'; |
15 |
| - |
16 |
| -const useStore = create(store); |
17 |
| - |
18 |
| -const useInterchainStore = () => { |
19 |
| - return useStore( |
20 |
| - (state) => ({ |
21 |
| - theme: state.theme, |
22 |
| - themeClass: state.themeClass, |
23 |
| - setThemeMode: state.setThemeMode, |
24 |
| - }), |
25 |
| - shallow |
26 |
| - ); |
27 |
| -}; |
28 |
| - |
29 |
| -export function useTheme() { |
30 |
| - const { theme, setThemeMode, themeClass } = useInterchainStore(); |
31 |
| - |
32 |
| - const setModalTheme = useCallback((mode: ModePreference) => { |
33 |
| - setThemeMode(mode); |
34 |
| - }, []); |
35 |
| - |
36 |
| - return { |
37 |
| - theme, |
38 |
| - themeClass, |
39 |
| - setModalTheme, |
40 |
| - }; |
41 |
| -} |
42 |
| -``` |
43 |
| - |
44 |
| -The reason why we have to create a custom hook like this is because theme store is a vanilla zustand store and its APIs are not bound directly to any UI framework, this is to keep everything portable between different UI frameworks. |
45 |
| - |
46 | 6 | - Import CSS stylesheet and wrap your top level layout component with our provider and our `themeClass`:
|
47 | 7 |
|
48 | 8 | ```TSX
|
49 | 9 | // layout.tsx
|
50 |
| -import { ThemeProvider } from '@interchain-ui/react'; |
51 |
| -import { useTheme } from './use-theme'; |
| 10 | +import { ThemeProvider, useTheme } from '@interchain-ui/react'; |
52 | 11 | import '@interchain-ui/react/styles';
|
53 | 12 |
|
54 | 13 | export function Layout(props: LayoutProps) {
|
55 |
| - const { themeClass } = useTheme(); |
| 14 | + const { theme, themeClass, setTheme } = useTheme(); |
56 | 15 |
|
57 | 16 | return (
|
58 | 17 | <ThemeProvider>
|
|
0 commit comments