From 2cffb3e83d2cc49be4f5ec220973c70c4a0b4bee Mon Sep 17 00:00:00 2001 From: Refusado Date: Tue, 2 Apr 2024 07:29:36 -0300 Subject: [PATCH 1/4] update social media logos --- src/components/Nav.module.css | 6 +++--- src/components/Nav.tsx | 27 ++++++++++++--------------- 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/src/components/Nav.module.css b/src/components/Nav.module.css index f2bfc1fd0..e989410fa 100644 --- a/src/components/Nav.module.css +++ b/src/components/Nav.module.css @@ -7,17 +7,16 @@ } .icon { - transition: 0.3s all; z-index: 10; max-width: 50px; min-width: 35px; flex: 1; - margin-right: 5px; } .icon svg { - height: 28px; + height: 24px; fill: white; + transition: 0.3s all; } .icon svg:hover { @@ -84,6 +83,7 @@ top: 15px; z-index: 1; display: flex; + gap: 8px; } .gitHubButtonWrap > span > span { diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 93f2609ea..608e6dd01 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -57,9 +57,8 @@ export default function Nav() { rel="noopener noreferrer" title="React Hook Form Discord" > - - - + + @@ -71,10 +70,8 @@ export default function Nav() { rel="noopener noreferrer" title="React Hook Form Twitter" > - - - - + + @@ -112,7 +109,7 @@ export default function Nav() { href="/resources/articles" >
-
+
Articles @@ -121,7 +118,7 @@ export default function Nav() { href="/resources/videos" >
-
+
Videos @@ -132,7 +129,7 @@ export default function Nav() { href="/resources/newsletters" >
-
+
Newsletters @@ -145,7 +142,7 @@ export default function Nav() { href="/resources/3rd-party-bindings" >
-
+
3rd-Party-Bindings @@ -176,7 +173,7 @@ export default function Nav() { href="/get-started" >
-
+
{nav.getStarted} @@ -192,7 +189,7 @@ export default function Nav() { href="/docs" >
-
+
API @@ -221,7 +218,7 @@ export default function Nav() { href="/advanced-usage" >
-
+
{nav.advanced} @@ -432,7 +429,7 @@ export default function Nav() { }} >
-
+
More From c855ea5390d780b4dd4869c73132761d9ca7a448 Mon Sep 17 00:00:00 2001 From: Refusado Date: Tue, 2 Apr 2024 19:25:28 -0300 Subject: [PATCH 2/4] improve social media icons size --- src/components/Nav.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Nav.module.css b/src/components/Nav.module.css index e989410fa..f8a60f784 100644 --- a/src/components/Nav.module.css +++ b/src/components/Nav.module.css @@ -14,7 +14,7 @@ } .icon svg { - height: 24px; + height: 16px; fill: white; transition: 0.3s all; } @@ -83,7 +83,7 @@ top: 15px; z-index: 1; display: flex; - gap: 8px; + gap: 4px; } .gitHubButtonWrap > span > span { From a93c7ad8131e71c00cf7b6cfb74f4a7ec97330d1 Mon Sep 17 00:00:00 2001 From: "Beier (Bill)" Date: Wed, 3 Apr 2024 09:51:07 +1100 Subject: [PATCH 3/4] Update Nav.module.css --- src/components/Nav.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Nav.module.css b/src/components/Nav.module.css index f8a60f784..fe9a6662c 100644 --- a/src/components/Nav.module.css +++ b/src/components/Nav.module.css @@ -17,6 +17,7 @@ height: 16px; fill: white; transition: 0.3s all; + margin-top: 6px; } .icon svg:hover { From 66bfdea8349a9897ce535c938a6185bfe1791403 Mon Sep 17 00:00:00 2001 From: Refusado Date: Mon, 8 Apr 2024 21:45:25 -0300 Subject: [PATCH 4/4] updates the official react references to the updated resources --- src/components/UseFieldArrayContent.tsx | 6 +++--- src/content/advanced-usage.mdx | 2 +- src/content/faqs.mdx | 3 ++- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/UseFieldArrayContent.tsx b/src/components/UseFieldArrayContent.tsx index 9c9f5a7b1..71d4d9d82 100644 --- a/src/components/UseFieldArrayContent.tsx +++ b/src/components/UseFieldArrayContent.tsx @@ -52,11 +52,11 @@ export default function UseFieldArrayContent({ api }: { api: any }) { identifier named id which is used for key{" "} prop. For more information why this is required:{" "} - https://reactjs.org/docs/lists-and-keys.html#keys + https://react.dev/learn/rendering-lists

@@ -141,7 +141,7 @@ append({ firstName: 'bill', lastName: 'luo' }); ✅`}

  • - we do not support circular reference. Refer to this {" "} + we do not support circular reference. Refer to this{" "} { ## FormProvider Performance {#FormProviderPerformance} -React Hook Form's [FormProvider](/docs/formprovider) is built upon [React's Context](https://reactjs.org/docs/context.html) API. It solves the problem where data is passed through the component tree without having to pass props down manually at every level. This also causes the component tree to trigger a re-render when React Hook Form triggers a state update, but we can still optimise our App if required via the example below. +React Hook Form's [FormProvider](/docs/formprovider) is built upon [React's Context](https://react.dev/learn/passing-data-deeply-with-context) API. It solves the problem where data is passed through the component tree without having to pass props down manually at every level. This also causes the component tree to trigger a re-render when React Hook Form triggers a state update, but we can still optimise our App if required via the example below. **Note:** Using React Hook Form's [Devtools](/dev-tools) alongside [FormProvider](/docs/formprovider) can cause performance issues in some situations. Before diving deep in performance optimizations, consider this bottleneck first. diff --git a/src/content/faqs.mdx b/src/content/faqs.mdx index 522614cea..4e2df5a45 100644 --- a/src/content/faqs.mdx +++ b/src/content/faqs.mdx @@ -12,7 +12,8 @@ Performance is one of the primary reasons why this library was created. React Ho ## How to create an accessible input error and message? {#Howtocreateanaccessibleinputerrorandmessage} -React Hook Form is based on [Uncontrolled Components](https://reactjs.org/docs/uncontrolled-components.html), which gives you the ability to easily build an accessible custom form. +React Hook Form is based on Uncontrolled Components, which gives you the ability to easily build an accessible custom form. +_(For more information about Uncontrolled Components, read [Sharing State Between Components](https://react.dev/learn/sharing-state-between-components))_ ```javascript copy import React from "react"