add example useWatch and re-export react-hook-form API

dohomi · Aug 29, 2022 · 82db475 · 82db475
1 parent 72c6724
commit 82db475
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 13 deletions.
diff --git a/apps/nextjs/src/components/Layout.tsx b/apps/nextjs/src/components/Layout.tsx
@@ -0,0 +1,29 @@
+import {FunctionComponent, PropsWithChildren} from "react";
+import {AppBar, Box, Button, Toolbar} from "@mui/material";
+import Link from "next/link";
+
+export const Layout: FunctionComponent<PropsWithChildren> = ({children}) => {
+    return (
+        <Box>
+            <AppBar>
+                <Toolbar>
+                    <Link href={'/'} passHref>
+                        <Button color={'inherit'}>
+                            Base
+                        </Button>
+                    </Link>
+                    <Link href={'/withSub'} passHref>
+                        <Button color={'inherit'}>
+                            With useWatch
+                        </Button>
+                    </Link>
+                </Toolbar>
+            </AppBar>
+            <Toolbar/>
+            <Box padding={3}>
+
+                {children}
+            </Box>
+        </Box>
+    )
+}
diff --git a/apps/nextjs/src/pages/_app.tsx b/apps/nextjs/src/pages/_app.tsx
@@ -6,6 +6,7 @@ import CssBaseline from '@mui/material/CssBaseline'
 import {CacheProvider, EmotionCache} from '@emotion/react'
 import theme from '../theme'
 import createEmotionCache from '../createEmotionCache'
+import {Layout} from "../components/Layout";
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache()
@@ -15,17 +16,19 @@ interface MyAppProps extends AppProps {
 }
 
 export default function MyApp(props: MyAppProps) {
-  const {Component, emotionCache = clientSideEmotionCache, pageProps} = props
-  return (
-    <CacheProvider value={emotionCache}>
-      <Head>
-        <title>Demo for MUI react-hook-forms</title>
-        <meta name="viewport" content="initial-scale=1, width=device-width"/>
-      </Head>
-      <ThemeProvider theme={theme}>
-        <CssBaseline/>
-        <Component {...pageProps} />
-      </ThemeProvider>
-    </CacheProvider>
-  )
+    const {Component, emotionCache = clientSideEmotionCache, pageProps} = props
+    return (
+        <CacheProvider value={emotionCache}>
+            <Head>
+                <title>Demo for MUI react-hook-forms</title>
+                <meta name="viewport" content="initial-scale=1, width=device-width"/>
+            </Head>
+            <ThemeProvider theme={theme}>
+                <CssBaseline/>
+                <Layout>
+                    <Component {...pageProps} />
+                </Layout>
+            </ThemeProvider>
+        </CacheProvider>
+    )
 }
diff --git a/apps/nextjs/src/pages/withSub.tsx b/apps/nextjs/src/pages/withSub.tsx
@@ -0,0 +1,43 @@
+import {Button} from "@mui/material";
+import {FormContainer, TextFieldElement, useWatch} from "react-hook-form-mui";
+
+const SubComponent = () => {
+    const [name, email] = useWatch({
+        name: ["name", "email"]
+    });
+    console.log(name, email);
+    return (
+        <>
+            <Button type={"submit"} color={"primary"} disabled={!(name && email)}>
+                Submit
+            </Button>
+        </>
+    );
+};
+
+export default function IndexPage() {
+
+    return (
+        <div>
+            <FormContainer
+                defaultValues={{
+                    name: ""
+                }}
+                onSuccess={(data) => {
+                    console.log(data)
+                }}
+            >
+                <TextFieldElement name={"name"} label={"Name"} required/> <br/>
+                <TextFieldElement
+                    name={"email"}
+                    label={"Email"}
+                    required
+                    type={"email"}
+                />{" "}
+                <br/>
+                <TextFieldElement name={"interest"} label={"Interest"}/> <br/>
+                <SubComponent/>
+            </FormContainer>
+        </div>
+    );
+}
diff --git a/packages/rhf-mui/src/index.ts b/packages/rhf-mui/src/index.ts
@@ -39,3 +39,5 @@ export type {AutocompleteElementProps} from './AutocompleteElement'
 
 export {default as SliderElement} from './SliderElement'
 export type {SliderElementProps} from './SliderElement'
+
+export * from 'react-hook-form'