diff --git a/docs/core/api/LogoutManager.md b/docs/core/api/LogoutManager.md index 15b78dc0b6a6..affa996286cd 100644 --- a/docs/core/api/LogoutManager.md +++ b/docs/core/api/LogoutManager.md @@ -22,37 +22,23 @@ Logs out based on fetch responses. By default this is triggered by [401 (Unautho ## Usage - - -```tsx title="/index.tsx" -import { DataProvider, LogoutManager, getDefaultManagers } from '@data-client/react'; -import ReactDOM from 'react-dom'; - -// highlight-next-line -const managers = [new LogoutManager(), ...getDefaultManagers()]; - -ReactDOM.render( - - - , - document.body, -); -``` - - - + ```tsx title="/index.tsx" -import { DataProvider, LogoutManager, getDefaultManagers } from '@data-client/react'; +import { + DataProvider, + LogoutManager, + getDefaultManagers, +} from '@data-client/react'; import ReactDOM from 'react-dom'; // highlight-next-line @@ -70,7 +56,11 @@ ReactDOM.createRoot(document.body).render( ```tsx title="/index.tsx" -import { DataProvider, LogoutManager, getDefaultManagers } from '@data-client/react'; +import { + DataProvider, + LogoutManager, + getDefaultManagers, +} from '@data-client/react'; import { AppRegistry } from 'react-native'; // highlight-next-line @@ -88,6 +78,23 @@ AppRegistry.registerComponent('MyApp', () => Root); +```tsx title="app/Provider.tsx" +'use client'; +import { LogoutManager, getDefaultManagers } from '@data-client/react'; +import { DataProvider } from '@data-client/react/nextjs'; + +// highlight-next-line +const managers = [new LogoutManager(), ...getDefaultManagers()]; + +export default function Provider({ + children, +}: { + children: React.ReactNode; +}) { + return {children}; +} +``` + ```tsx title="app/_layout.tsx" import Provider from './Provider'; @@ -95,25 +102,70 @@ export default function RootLayout({ children }) { return ( - - {children} - + {children} ); } ``` + + + ```tsx title="app/Provider.tsx" -'use client'; -import { LogoutManager, getDefaultManagers } from '@data-client/react'; -import { DataProvider } from '@data-client/react/nextjs'; +import { + LogoutManager, + getDefaultManagers, + DataProvider, +} from '@data-client/react'; +import { + DarkTheme, + DefaultTheme, + ThemeProvider, +} from '@react-navigation/native'; +import { useColorScheme } from '@/hooks/useColorScheme'; // highlight-next-line const managers = [new LogoutManager(), ...getDefaultManagers()]; -export default function Provider({ children }: { children: React.ReactNode }) { - return {children}; +export default function Provider({ + children, +}: { + children: React.ReactNode; +}) { + const colorScheme = useColorScheme(); + + return ( + + // highlight-next-line + {children} + + ); +} +``` + +```tsx title="app/_layout.tsx" +import { Stack } from 'expo-router'; +import 'react-native-reanimated'; + +// highlight-next-line +import Provider from './Provider'; + +export default function RootLayout() { + return ( + // highlight-start + + // highlight-end + + + + + // highlight-start + + // highlight-end + ); } ``` @@ -155,7 +207,7 @@ const managers = [ unAuth(); // still reset the store // highlight-next-line - controller.invalidateAll({ testKey }) + controller.invalidateAll({ testKey }); }, }), ...getDefaultManagers(), diff --git a/docs/core/api/Manager.md b/docs/core/api/Manager.md index b38744adb649..aa5ab4891f86 100644 --- a/docs/core/api/Manager.md +++ b/docs/core/api/Manager.md @@ -75,33 +75,16 @@ sure to hoist to module level or wrap in a useMemo() to ensure they are not recr have internal state, so it is important to not constantly recreate them. - - -```tsx title="/index.tsx" -import { DataProvider, getDefaultManagers } from '@data-client/react'; -import ReactDOM from 'react-dom'; - -const managers = [...getDefaultManagers(), new MyManager()]; - -ReactDOM.render( - - - , - document.body, -); -``` - - - + ```tsx title="/index.tsx" import { DataProvider, getDefaultManagers } from '@data-client/react'; @@ -138,18 +121,89 @@ AppRegistry.registerComponent('MyApp', () => Root); -```tsx title="pages/_app.tsx" -import { DataProvider, getDefaultManagers } from '@data-client/react'; -import { AppDataProvider } from '@data-client/ssr/nextjs'; -import type { AppProps } from 'next/app'; +```tsx title="app/Provider.tsx" +'use client'; +import { getDefaultManagers } from '@data-client/react'; +import { DataProvider } from '@data-client/react/nextjs'; +// highlight-next-line const managers = [...getDefaultManagers(), new MyManager()]; -export default function App({ Component, pageProps }: AppProps) { +export default function Provider({ + children, +}: { + children: React.ReactNode; +}) { + return {children}; +} +``` + +```tsx title="app/_layout.tsx" +import Provider from './Provider'; + +export default function RootLayout({ children }) { + return ( + + + {children} + + + ); +} +``` + + + + +```tsx title="app/Provider.tsx" +import { getDefaultManagers, DataProvider } from '@data-client/react'; +import { + DarkTheme, + DefaultTheme, + ThemeProvider, +} from '@react-navigation/native'; +import { useColorScheme } from '@/hooks/useColorScheme'; + +// highlight-next-line +const managers = [...getDefaultManagers(), new MyManager()]; + +export default function Provider({ + children, +}: { + children: React.ReactNode; +}) { + const colorScheme = useColorScheme(); + return ( - - - + + // highlight-next-line + {children} + + ); +} +``` + +```tsx title="app/_layout.tsx" +import { Stack } from 'expo-router'; +import 'react-native-reanimated'; + +// highlight-next-line +import Provider from './Provider'; + +export default function RootLayout() { + return ( + // highlight-start + + // highlight-end + + + + + // highlight-start + + // highlight-end ); } ``` @@ -163,8 +217,8 @@ Managers live in the DataProvider centralized store. They orchestrate complex co via intercepting and dispatching actions, as well as reading the internal state. ReactJS 16+ and React Native ReactJS 16.2 and above is supported (the one with hooks!). React 18 provides improved [Suspense](../api/useSuspense.md) -support and features. Both React Native and React Navigation are supported. +support and features. Both React Native, [React Navigation](https://reactnavigation.org/) and [Expo](https://docs.expo.dev) are supported. -Other native frameworks like Expo should work, but have not been verified. If you have a working project using other +If you have a working project using other React libraries, [feel free to share with others](https://github.com/reactive/data-client/discussions/2422) in our discussions. diff --git a/docs/core/shared/_installation.mdx b/docs/core/shared/_installation.mdx index f7ddb99fdf6d..02796a8ac03d 100644 --- a/docs/core/shared/_installation.mdx +++ b/docs/core/shared/_installation.mdx @@ -5,34 +5,17 @@ import PkgInstall from '@site/src/components/PkgInstall'; import Link from '@docusaurus/Link'; - - -```tsx title="index.tsx" -import { DataProvider } from '@data-client/react'; -import ReactDOM from 'react-dom'; - -ReactDOM.render( - - - , - document.body, -); -``` - -Alternatively [integrate state with redux](../guides/redux.md) - - - + ```tsx title="index.tsx" import { DataProvider } from '@data-client/react'; @@ -83,7 +66,7 @@ export default function RootLayout({ children }) { // highlight-next-line {children} - // highlight-next-line + // highlight-next-line @@ -92,6 +75,45 @@ export default function RootLayout({ children }) { ``` + + +```tsx title="app/_layout.tsx" +import { + DarkTheme, + DefaultTheme, + ThemeProvider, +} from '@react-navigation/native'; +import { Stack } from 'expo-router'; +import 'react-native-reanimated'; +// highlight-next-line +import { DataProvider } from '@data-client/react'; + +import { useColorScheme } from '@/hooks/useColorScheme'; + +export default function RootLayout() { + const colorScheme = useColorScheme(); + + return ( + + // highlight-start + + // highlight-end + + + + + // highlight-start + + // highlight-end + + ); +} +``` + + + [Anansi](https://github.com/ntucker/anansi) (beta) is a fully composable framework for React development with optional