Skip to content

Commit f213e2e

Browse files
committed
docs: update react doc
1 parent 86bc049 commit f213e2e

File tree

1 file changed

+2
-43
lines changed

1 file changed

+2
-43
lines changed

docs/react.md

Lines changed: 2 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,15 @@
33
Follow these steps to use @interchain-ui/react:
44

55
- 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-
466
- Import CSS stylesheet and wrap your top level layout component with our provider and our `themeClass`:
477

488
```TSX
499
// layout.tsx
50-
import { ThemeProvider } from '@interchain-ui/react';
51-
import { useTheme } from './use-theme';
10+
import { ThemeProvider, useTheme } from '@interchain-ui/react';
5211
import '@interchain-ui/react/styles';
5312

5413
export function Layout(props: LayoutProps) {
55-
const { themeClass } = useTheme();
14+
const { theme, themeClass, setTheme } = useTheme();
5615

5716
return (
5817
<ThemeProvider>

0 commit comments

Comments
 (0)