";display:inline-block}.typography-module--codeHeading--620dd .typography-module--videoLink--1ac9c,.typography-module--h5--1fa33 .typography-module--videoLink--1ac9c{background:none;border:1px solid var(--color-secondary);color:#fff;font-family:Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;margin-bottom:-5px;margin-left:15px;padding:5px 10px;text-decoration:none;text-transform:uppercase}.typography-module--h1--aa35b{border-bottom:2px solid var(--color-secondary);display:inline-block;font-size:24px;font-weight:400;margin:40px auto;padding-bottom:5px}.typography-module--h5--1fa33{border-bottom:1px solid var(--color-light-blue);font-size:18px;font-weight:500;margin:50px 0 10px;padding-bottom:15px;text-align:left}.typography-module--h5--1fa33>code{font-size:18px!important}.typography-module--typeText--ab967{color:var(--color-light-pink)!important;font-family:monospace;font-size:14px;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-weight:400}.typography-module--note--7159b{color:var(--color-light-pink)}.typography-module--codeBlock--3d1e6{display:block;padding:10px}.typography-module--error--e7a80{color:var(--color-light-pink);font-size:12px}@media (min-width:768px){.typography-module--h1--aa35b{font-size:36px;font-weight:700}.typography-module--heading--01d5b,.typography-module--headingWithTopMargin--bbdc8{font-size:55px!important;margin:80px auto 10px}.typography-module--subHeading--9a97e{font-size:18px;margin-bottom:20px;margin-top:5px;max-width:575px}.typography-module--title--05771{font-size:1.3rem;line-height:1.5;margin-top:20px}h2.typography-module--title--05771{margin-top:40px}.typography-module--headingWithTopMargin--bbdc8{margin-top:70px}.typography-module--questionTitle--98480{border-left:5px solid var(--color-light-pink);line-height:1;padding-left:10px}}@media (min-width:1024px){.typography-module--h1--aa35b{border-bottom:3px solid var(--color-secondary);font-size:50px;line-height:1.3;margin-top:60px}.typography-module--homeParagraph--7dcfc{font-size:20px;line-height:1.5}.typography-module--heading--01d5b,.typography-module--headingWithTopMargin--bbdc8{margin-top:20px}.typography-module--headingWithTopMargin--bbdc8{margin-top:70px}}.button-module--codeAsLink--7328a,.button-module--links--d2e29{color:var(--color-link)}.button-module--codeAsLink--7328a{-webkit-appearance:none;appearance:none;background:none;border:none;color:var(--color-link)!important;cursor:pointer;padding:0;text-decoration:underline}.button-module--buttonsGroup--fad3c{grid-column-gap:20px;display:grid;grid-template-columns:repeat(2,1fr);margin:0 auto}.button-module--button--282b1,.button-module--darkButton--82a56,.button-module--pinkButton--2776e,.button-module--primaryButton--bde44{-webkit-appearance:none;border-radius:4px;color:#fff;cursor:pointer;display:inline-block;font-size:16px;font-weight:400;line-height:1;margin:20px 0;padding:16px 10px;transition:all .3s}.button-module--primaryButton--bde44{background:var(--color-primary);border:1px solid var(--color-light-blue);box-sizing:border-box}a.button-module--primaryButton--bde44{text-decoration:none}a.button-module--primaryButton--bde44:hover{color:#fff}.button-module--darkButton--82a56,.button-module--pinkButton--2776e{background:var(--color-light-pink);border:1px solid var(--color-light-pink);letter-spacing:.5rem;text-transform:uppercase;width:100%}.button-module--pinkButton--2776e:hover{background:var(--color-secondary)}.button-module--darkButton--82a56{background:#000;border:1px solid var(--color-light-pink);color:#fff}.button-module--darkButton--82a56:hover{background:var(--color-primary);border:1px solid var(--color-secondary)}.button-module--darkButton--82a56:active{background:#000}@-webkit-keyframes button-module--moving--dc27f{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(5px);transform:translateX(5px)}}@keyframes button-module--moving--dc27f{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(5px);transform:translateX(5px)}}.button-module--primaryButton--bde44:hover>span{-webkit-animation:button-module--moving--dc27f .4s linear infinite;animation:button-module--moving--dc27f .4s linear infinite;-webkit-animation-direction:alternate;animation-direction:alternate;display:inline-block}.button-module--primaryButton--bde44:active{background:#000}.button-module--primaryButton--bde44:hover{border:1px solid var(--color-secondary);box-shadow:0 0 5px #000}@media (min-width:768px){.button-module--primaryButton--bde44{font-size:18px;font-weight:400;margin:40px 0;padding:15px 30px}.button-module--buttonsGroup--fad3c{grid-column-gap:30px}}.container-module--container--ae4f1{padding-top:45px}.container-module--subContainer--b9fbc{margin:0 auto;max-width:768px}.container-module--centerContent--adbcb{margin:0 auto;max-width:1024px;text-align:center}.container-module--centerContent--adbcb svg{display:none}.container-module--wrapper--c1517{margin:0 auto;max-width:1235px;overflow:hidden;padding:0 15px 100px 20px;position:relative}.container-module--centerContent--adbcb p{margin:0 auto;max-width:730px}.container-module--centerContent--adbcb h3{margin:0}@media (min-width:768px){.container-module--container--ae4f1{padding-top:0}.container-module--centerContent--adbcb svg{display:block;margin:100px auto -30px;text-align:center;width:85px}.container-module--wrapper--c1517{display:grid;grid-template-columns:250px minmax(0,1fr)}}@media (min-width:1024px){.container-module--wrapper--c1517{display:grid;grid-template-columns:300px minmax(0,1fr)}.container-module--centerContent--adbcb svg{margin:100px auto -50px}}.Form-module--code--b47b9{font-size:.7rem;line-height:1.6;padding:0 20px;white-space:pre-wrap}.Form-module--wrapper--de8b4{grid-column-gap:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin:20px auto 0;max-width:1440px;min-height:700px;transition:all 1s}.Form-module--demoForm--935d3{flex:1 1}.Form-module--demoForm--935d3>input,.Form-module--demoForm--935d3>select,.Form-module--input--42b56{border-radius:4px;box-sizing:border-box;display:block;font-size:.9rem;margin-bottom:10px;padding:6px 10px;width:100%}.Form-module--demoForm--935d3>select:not([multiple]){height:43px}.ResourcePage-module--root--c0b67{margin:0 20px 40px;padding-bottom:40px}.ResourcePage-module--tagWrapper--5ff7c{display:flex;justify-content:flex-end}.ResourcePage-module--contentListLayout--a2dc9 .ResourcePage-module--tagWrapper--5ff7c{position:absolute;right:0;top:1rem}.ResourcePage-module--tag--e9645{background:#fff;border-radius:8px;color:var(--color-primary);display:block;font-size:10px;font-weight:500;margin:0;text-align:center;text-transform:uppercase;width:25px}.ResourcePage-module--contentList--cfa40{list-style:none;padding:0;width:100%}.ResourcePage-module--contentListLayout--a2dc9{display:flex;flex-direction:column;gap:0;margin:0 auto;max-width:1280px}.ResourcePage-module--searchFilter--90d92{border-radius:25px;box-sizing:border-box;display:flex;font-size:16px;line-height:24px;margin:10px auto;max-width:500px;padding:3px 20px;width:100%}@media (min-width:768px){.ResourcePage-module--searchFilter--90d92{padding:8px 20px}}.ResourcePage-module--searchFilter--90d92:focus{border:1px solid var(--color-light-pink);cursor:default;outline:none}.ResourcePage-module--article--f6014{margin-bottom:15px}.ResourcePage-module--article--f6014 img{border:1px solid var(--color-light-blue);border-radius:4px;height:100px;object-fit:contain;width:100%}.ResourcePage-module--article--f6014>a{color:#fff;text-decoration:none}.ResourcePage-module--article--f6014>a:hover{color:var(--color-secondary)}.ResourcePage-module--article--f6014 h3{-webkit-line-clamp:2;font-size:18px;font-weight:500}.ResourcePage-module--article--f6014 h3,.ResourcePage-module--article--f6014 p{-webkit-box-orient:vertical;display:-webkit-box;margin:5px 0;overflow:hidden;text-overflow:ellipsis}.ResourcePage-module--article--f6014 p{-webkit-line-clamp:4}p.ResourcePage-module--author--ea0f7{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.ResourcePage-module--name--420ea{font-weight:600}.ResourcePage-module--contentList--cfa40 img{display:block;margin:0 auto;width:200px}.ResourcePage-module--contentList--cfa40 img:hover{border:13px solid var(--color-light-blue);opacity:.8;transition:all .3s ease-out}.ResourcePage-module--contentList--cfa40>li{margin-bottom:40px;overflow:hidden;position:relative}.ResourcePage-module--contentListLayout--a2dc9>li{border-bottom:1px solid var(--color-light-blue);list-style:none;margin-bottom:1rem;position:relative}.ResourcePage-module--contentList--cfa40 li>svg{fill:#091129;height:100%;position:absolute;width:100%;z-index:2}.ResourcePage-module--interests--92c44{list-style:none;margin:0;padding:0}.ResourcePage-module--interests--92c44>ul{border:1px solid var(--color-light-blue);display:flex;flex-direction:row;font-size:14px;margin:0;padding:8px 0;text-align:center}.ResourcePage-module--interests--92c44 li{border-right:1px solid var(--color-light-blue);flex:1 1;font-size:13px;list-style:none}.ResourcePage-module--interests--92c44 li:last-child{border:none}.ResourcePage-module--twitter--3a73a:hover>svg{fill:var(--color-secondary)}.ResourcePage-module--layoutButtons--cbfb8{align-items:center;display:flex;justify-content:center;margin-bottom:-2rem;margin-top:2rem}@media (min-width:768px){.ResourcePage-module--contentList--cfa40{grid-gap:30px;display:grid;grid-template-columns:repeat(4,1fr);margin:0 auto;max-width:1280px}.ResourcePage-module--interests--92c44>ul{flex-direction:column;padding:8px 20px;text-align:left}.ResourcePage-module--interests--92c44>ul>li{border-right:0}.ResourcePage-module--contentList--cfa40 img{transition:all .3s ease-in;width:100%}}@media (min-width:1024px){.ResourcePage-module--interests--92c44>ul{flex-direction:row;padding-left:0;padding-right:0;text-align:center}.ResourcePage-module--interests--92c44>ul>li{border-right:1px solid var(--color-light-blue)}}.media-module--media--eeba3{display:flex;flex-direction:column;gap:2rem;grid-template-columns:1fr 1fr;margin:3rem auto;max-width:800px}.media-module--media--eeba3 div{align-items:center;display:flex;flex-direction:column}.media-module--media--eeba3 p{font-size:12px}.media-module--media--eeba3 img{border-radius:10px;width:100%}img.media-module--logo--88c9a{height:200px;width:200px}@media (min-width:768px){.media-module--media--eeba3{display:grid;gap:2rem;grid-template-columns:1fr 1fr;margin:3rem auto}}.Header-module--logo--9b73c{fill:#fff;background:var(--color-light-pink);border:8px solid #fff;border-radius:20px;height:80px;margin:-50px auto 0;padding:15px}.Header-module--desktopLogo--c14c9{background:var(--color-light-pink);border:4px solid #fff;border-radius:12px;display:none;height:60px;margin-right:5px;padding:8px;position:relative;top:10px}.Header-module--head--f938c{align-items:center;display:flex;flex-direction:column;height:100vh;justify-content:center}.Header-module--videoHeading--3c561{border-bottom:2px solid var(--color-secondary);display:block;font-weight:400;line-height:2;margin-bottom:0;text-align:center}.Header-module--toggleGroup--967e1{border:1px solid var(--color-light-blue);border-radius:4px;display:none;text-align:center}.Header-module--toggleGroup--967e1>button{background:#000;border:1px solid transparent;color:#fff;cursor:pointer;padding:10px 25px;width:155px}.Header-module--toggleGroup--967e1>button:active{-webkit-transform:none;transform:none}.Header-module--toggleGroup--967e1.Header-module--smallToggleGroup--8e846>button{background:#000;border:1px solid transparent;color:#fff;cursor:pointer;font-size:14px;padding:5px 15px;width:70px}.Header-module--toggleGroup--967e1>button:hover{background:var(--color-secondary)}.Header-module--toggleGroup--967e1>button:first-child{border-bottom-left-radius:4px;border-right:0;border-right:1px solid var(--color-light-blue);border-top-left-radius:4px}.Header-module--toggleGroup--967e1>button:disabled{background:transparent;color:currentColor;cursor:default}.Header-module--toggleGroup--967e1>button:last-child{border-bottom-right-radius:4px;border-left:0!important;border-top-right-radius:4px}.Header-module--video--50363{border:1px solid transparent;border-radius:10px;box-shadow:0 0 9px 0 #010817;cursor:pointer;display:block;transition:all .3s;width:100%}.Header-module--video--50363:hover{border:1px solid var(--color-secondary)}.Header-module--videoWrapperHide--6b6eb,.Header-module--videoWrapperShow--c388f{margin-bottom:100px}@media (min-width:320px){.Header-module--logo--9b73c{height:120px}}@media (min-width:768px){.Header-module--logo--9b73c{display:none}.Header-module--head--f938c{height:auto}.Header-module--videoHeading--3c561{display:none}.Header-module--desktopLogo--c14c9{fill:#fff;display:inline-block}.Header-module--toggleGroup--967e1{display:inline-block;margin:0 auto 50px}.Header-module--video--50363{height:400px;margin:0 auto 20px;width:700px}.Header-module--videoWrapperShow--c388f{display:block;margin-bottom:0}.Header-module--videoWrapperHide--6b6eb{display:none;margin-bottom:0}.Header-module--logoHeading--8742b{margin-top:70px}}@media (min-width:1024px){.Header-module--video--50363{height:480px;width:800px}.Header-module--logoHeading--8742b{margin-top:50px}}@media (min-width:1280px){.Header-module--video--50363{height:600px;width:980px}}.Watcher-module--root--1255b{display:none}.Watcher-module--svgWrapper--31833{width:200px}.Watcher-module--watchGroup--c90d1{display:flex;height:50px}.Watcher-module--watchGroup--c90d1 p{background:none;margin-top:5px;padding:0 0 0 50px}.Watcher-module--watchGroup--c90d1 input[type=checkbox]{-webkit-appearance:none;appearance:none;background:var(--color-secondary);border:1px solid var(--color-secondary);border-radius:2px;height:20px;margin-left:-60px;margin-top:8px;width:20px}.Watcher-module--watchGroup--c90d1 input[type=checkbox]:checked{background:#fff;border:1px solid #fff}.Watcher-module--svgWrapper--31833 svg{width:100%}.Watcher-module--svgWrapper--31833 svg path{stroke-dasharray:10;-webkit-animation:Watcher-module--dash--52826 10s linear infinite normal;animation:Watcher-module--dash--52826 10s linear infinite normal}@-webkit-keyframes Watcher-module--dash--52826{0%{stroke-dashoffset:500}to{stroke-dashoffset:0}}@keyframes Watcher-module--dash--52826{0%{stroke-dashoffset:500}to{stroke-dashoffset:0}}@media (min-width:768px){.Watcher-module--watcher--16e44{display:block}.Watcher-module--root--1255b{display:grid;grid-template-columns:1fr 1fr 200px;margin:40px auto;max-width:800px}.Watcher-module--svgWrapper--31833{display:block;width:300px}.Watcher-module--svgWrapper--31833 svg{height:200px}}.SortableContainer-module--list--17f7e{background:var(--color-primary);border:1px solid var(--color-light-blue);border-radius:4px;color:#fff;cursor:move;list-style:none;margin-bottom:10px;padding:14px 14px 14px 50px;position:relative}.SortableContainer-module--list--17f7e>svg{fill:#fff;display:inline-block;left:15px;position:absolute;top:17px;width:20px}.SortableContainer-module--editPanel--7e53f{float:right}.SortableContainer-module--editPanel--7e53f>button{background:var(--color-light-blue);border:1px solid transparent;color:#fff;cursor:pointer;font-size:14px;letter-spacing:1px;padding:1px 8px;position:relative;text-transform:uppercase;top:-2px}.SortableContainer-module--editPanel--7e53f>button:hover{background:var(--color-primary);border:1px solid var(--color-secondary)}.SortableContainer-module--editPanel--7e53f>button:first-child{margin-right:14px}.SortableContainer-module--sortableWrapper--03027{margin-top:30px}.SortableContainer-module--sortableWrapper--03027>ul{margin-left:0;padding-left:0}.CodeArea-module--buttonWrapper--563c7{display:flex;position:absolute;right:5px;top:10px}.CodeArea-module--button--01667{align-items:center;border:none;border-radius:0;color:#fff;cursor:pointer;display:none;font-size:13px;height:34px;margin:0 3px;padding:0 10px;right:20px;text-transform:uppercase;top:10px;z-index:1}.CodeArea-module--codeLink--d953a{background:var(--color-light-blue);border:1px solid transparent}.CodeArea-module--button--01667:hover{background:var(--color-secondary);color:#fff}@media (min-width:768px){.CodeArea-module--button--01667{display:flex}}.CodeArea-module--copyButton--86547{background:none;border:1px solid transparent;color:currentColor}.CodeArea-module--active--48be4,.CodeArea-module--copyButton--86547:hover{background:none;border:1px solid var(--color-secondary);color:#fff}.CodeArea-module--active--48be4,.CodeArea-module--copyButton--86547:hover span{background:var(--color-primary)}.CodeArea-module--linkToSandBox--19453{color:inherit;line-height:2;right:115px;text-decoration:none}.CodeArea-module--linkToSandBox--19453>svg{display:inline-block;height:18px;margin-right:8px;position:relative}.CodeArea-module--wrapper--37a56 pre{line-height:1.5!important}.CodeArea-module--wrapper--37a56 pre code{display:none}.CodeArea-module--wrapper--37a56 pre code.CodeArea-module--showCode--7b88d{display:block}.CodeCompareSection-module--gridView--1d719{display:flex;flex-direction:column}.CodeCompareSection-module--gridView--1d719>div:first-child{order:1}.CodeCompareSection-module--gridView--1d719 iframe{box-shadow:0 0 20px #010817;display:none}.CodeCompareSection-module--fullScreen--2e6b3{background:none;border-bottom-left-radius:4px;border-right:none;border-color:var(--color-secondary);border-top:none;border-top-color:var(--color-secondary);color:#fff;display:none;font-size:12px;position:absolute;right:0;z-index:1}.CodeCompareSection-module--fullScreen--2e6b3:hover{background:var(--color-light-pink)}@media (min-width:1000px){.CodeCompareSection-module--gridView--1d719{grid-column-gap:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:0 auto;max-width:1024px}.CodeCompareSection-module--gridView--1d719 iframe{display:block}.CodeCompareSection-module--gridView--1d719>div:first-child{order:0}.CodeCompareSection-module--fullScreen--2e6b3{display:block}.CodeCompareSection-module--display--37d78{display:none}}.CodePerfCompareSection-module--imgSection--5dc94{display:flex;flex-direction:column}.CodePerfCompareSection-module--imgSection--5dc94>img{border-radius:4px;box-shadow:0 0 8px #000;margin:20px 0;max-width:100%;object-fit:cover}.CodePerfCompareSection-module--imgSection--5dc94 ul{list-style-type:none;margin:0 15px 0 0;min-width:250px;padding-left:0}.CodePerfCompareSection-module--imgSection--5dc94 ul>li{font-size:16px;margin-left:0;padding:2px 0}.CodePerfCompareSection-module--videoWrapper--75eff{-webkit-overflow-scrolling:touch;display:flex;height:450px;margin:20px 0 40px;overflow-x:auto;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;width:100%}.CodePerfCompareSection-module--videoWrapper--75eff p{text-align:center}.CodePerfCompareSection-module--videoWrapper--75eff>section:first-child{order:1}.CodePerfCompareSection-module--videoWrapper--75eff>section{flex-shrink:0;height:100%;overflow-y:hidden;scroll-snap-align:start;width:100%}.CodePerfCompareSection-module--videoWrapper--75eff>section>video{border-radius:10px;height:100%;width:100%}@media (min-width:768px){.CodePerfCompareSection-module--imgSection--5dc94{flex-direction:row;justify-content:center;max-width:80%}.CodePerfCompareSection-module--imgSection--5dc94 ul{margin-left:250px}.CodePerfCompareSection-module--videoWrapper--75eff>section:first-child{order:0}.CodePerfCompareSection-module--videoWrapper--75eff{grid-column-gap:60px;display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));height:auto;margin:40px auto;max-width:768px;overflow-y:hidden}.CodePerfCompareSection-module--videoWrapper--75eff>section>video{border-radius:10px;height:400px;margin-top:-44px}}@media (min-width:1024px){.CodePerfCompareSection-module--videoWrapper--75eff>section>video{height:450px}}.IsolateRender-module--wrapper--12f78{grid-gap:20px;display:grid;grid-template-columns:1fr 1fr;margin-top:20px;position:relative}.IsolateRender-module--wrapper--12f78>div{display:none}.IsolateRender-module--wrapper--12f78 p{font-size:45px;font-weight:800;line-height:1.4;margin-top:160px}.IsolateRender-module--lightWrapper--7a254 p{background:#fff}.IsolateRender-module--wrapper--12f78 h2{font-size:14px}.IsolateRender-module--externalComponent--8a91a{border:1px solid var(--color-secondary);border-radius:4px;font-size:14px;margin:20px 0;padding:10px 0}.IsolateRender-module--line--b3883{background:var(--color-blue);height:44%;left:50%;position:absolute;top:30%;width:1px;z-index:-1}@media (min-width:768px){.IsolateRender-module--wrapper--12f78{grid-gap:40px;grid-template-columns:1fr 65px 1fr}.IsolateRender-module--wrapper--12f78>div{display:block}.IsolateRender-module--wrapper--12f78 h2{font-size:24px;font-weight:400;padding-bottom:10px}}.Footer-module--footer--afd90{font-size:.8rem;font-weight:400;margin-bottom:60px;padding:40px 0;text-align:center}.Footer-module--footer--afd90 a{color:#fff;text-decoration:none}.Footer-module--lightFooter--2fafa a{color:var(--color-black)}.Footer-module--footer--afd90 a:hover{color:var(--color-light-pink);text-decoration:none}.Footer-module--lightFooter--2fafa a:hover{color:var(--color-light-pink)}.Footer-module--footer--afd90>p{font-size:13px}.Footer-module--links--34636{border-bottom:1px solid var(--color-light-pink);display:block;margin:0 auto 20px;max-width:900px;padding:0 0 10px}.Footer-module--links--34636>li{display:inline-flex}.Footer-module--links--34636>li>a{color:#fff;min-height:48px;min-width:48px;padding:10px 12px;text-decoration:none}.Footer-module--lightFooter--2fafa .Footer-module--links--34636>li>a{color:var(--color-black);font-weight:500}.Footer-module--lightFooter--2fafa .Footer-module--links--34636>li>a:hover{color:var(--color-light-pink)}a.Footer-module--link--8b124{color:var(--color-primary)}.Popup-module--button--72f64,.Popup-module--icon--cc4ed,.Popup-module--iconStyle--869ed{align-items:center;border:none;border-radius:50%;display:inline-flex;font-size:15px;height:18px;justify-content:center;line-height:1;margin-left:10px;width:18px}.Popup-module--icon--cc4ed{border:1px solid #fff;margin-left:0;margin-right:5px}.Popup-module--root--e94eb{font-weight:700;position:relative}.Popup-module--root--e94eb>span{display:inline-block;font-size:14px!important;font-weight:400;margin-left:10px;overflow:hidden;position:relative;top:5px}.Popup-module--root--e94eb>span>span{display:inline-block;font-family:sans-serif;position:relative}.Popup-module--button--72f64{cursor:pointer}.Popup-module--button--72f64:hover{background:var(--color-light-pink);color:#fff}.DevToolFeaturesList-module--featuresContent--6f48a{text-align:center}.DevToolFeaturesList-module--featuresContent--6f48a h3{font-size:20px;font-weight:400;margin-top:10px}.DevToolFeaturesList-module--featuresContent--6f48a svg{fill:#fff;display:block;height:60px;margin:0 auto;width:50px}.DevToolFeaturesList-module--lightFeaturesContent--36412 svg{fill:var(--color-black)}.DevToolFeaturesList-module--featuresContent--6f48a>article{padding-bottom:30px}.DevToolFeaturesList-module--featuresContent--6f48a>article>div{-webkit-transform:scale(0);transform:scale(0)}.DevToolFeaturesList-module--features--8f01f{margin-top:-60px}.DevToolFeaturesList-module--features--8f01f>h2{margin-bottom:30px}@media (min-width:768px){.DevToolFeaturesList-module--featuresContent--6f48a h3{font-size:22px}.DevToolFeaturesList-module--features--8f01f>h2{margin:0 auto 20px;max-width:450px}.DevToolFeaturesList-module--features--8f01f{margin-top:60px}.DevToolFeaturesList-module--featuresContent--6f48a{grid-column-gap:40px;display:grid;grid-template-columns:repeat(3,1fr);margin:20px auto 30px;max-width:800px}}.BuilderPage-module--root--21e15{-webkit-overflow-scrolling:touch;box-sizing:border-box;height:100vh;left:0;position:fixed;top:0;width:100%;z-index:11}.BuilderPage-module--pageWrapper--44aa7{grid-column-gap:60px;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:0 auto 100px;max-width:2000px;overflow:hidden;padding:0 20px 100px}.BuilderPage-module--pageWrapper--44aa7>section:first-child{margin-top:50px;order:3}.BuilderPage-module--pageWrapper--44aa7>form:nth-child(2){order:1}.BuilderPage-module--pageWrapper--44aa7>section:nth-child(3){order:2}.BuilderPage-module--form--ab580 input,.BuilderPage-module--form--ab580 select{border-radius:4px;box-sizing:border-box;display:block;font-size:16px;margin-bottom:10px;padding:6px 10px;width:100%}.BuilderPage-module--form--ab580 input:hover,.BuilderPage-module--form--ab580 select:hover{border:1px solid var(--color-light-pink)}.BuilderPage-module--form--ab580 select:not([multiple]){height:40px}.BuilderPage-module--form--ab580 input.BuilderPage-module--form-error--41022{border:1px solid #bf1650}.BuilderPage-module--form--ab580 input[type=checkbox]{display:inline-block;margin-right:10px;width:auto}.BuilderPage-module--form--ab580 label{display:block;line-height:2;margin-bottom:13px;margin-top:20px;text-align:left}.BuilderPage-module--form--ab580 fieldset{border:1px solid var(--color-light-blue);border-radius:4px}.BuilderPage-module--closeButton--a932d{background:var(--color-primary);border:1px solid #fff;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:25px;height:50px;justify-content:center;position:absolute;right:30px;top:20px;width:50px;z-index:5}.BuilderPage-module--closeButton--a932d:hover{border:1px solid var(--color-secondary)}@media (min-width:768px){.BuilderPage-module--pageWrapper--44aa7>section:first-child{margin-top:0;order:1}.BuilderPage-module--pageWrapper--44aa7>form:nth-child(2){order:2}.BuilderPage-module--pageWrapper--44aa7>section:nth-child(3){order:3}.BuilderPage-module--closeButton--a932d{align-items:center;display:flex;justify-content:center}}.BuilderPage-module--buttonWrapper--dae33{display:flex;position:absolute;right:5px;top:10px}.BuilderPage-module--button--471a6{align-items:center;border:none;border-radius:0;color:#fff;cursor:pointer;display:none;font-size:13px;height:34px;margin:0 3px;padding:0 10px;right:20px;text-transform:uppercase;top:10px;z-index:1}.BuilderPage-module--button--471a6:hover{background:var(--color-secondary);color:#fff}@media (min-width:768px){.BuilderPage-module--button--471a6{display:flex}}.BuilderPage-module--copyButton--9059c{background:var(--color-light-blue);border:1px solid transparent}.BuilderPage-module--active--8e6b7,.BuilderPage-module--copyButton--9059c:hover{background:none;border:1px solid var(--color-secondary);color:#fff}.BuilderPage-module--active--8e6b7,.BuilderPage-module--copyButton--9059c:hover span{background:var(--color-primary)}.BuilderPage-module--wrapper--16b3d pre{line-height:1.5!important}.BuilderPage-module--wrapper--16b3d pre code{display:none}.BuilderPage-module--wrapper--16b3d pre code.BuilderPage-module--showCode--a6a06{display:block}.FeatureList-module--featuresContent--fcee3{text-align:center}.FeatureList-module--featuresContent--fcee3 h3{font-size:20px;font-weight:500;margin-top:10px}.FeatureList-module--featuresContent--fcee3 svg{display:block;height:60px;margin:0 auto;width:50px}.FeatureList-module--lightFeaturesContent--74f2a svg{fill:var(--color-black)}.FeatureList-module--featuresContent--fcee3>article{padding-bottom:30px}.FeatureList-module--featuresContent--fcee3>article>div{-webkit-transform:scale(0);transform:scale(0)}.FeatureList-module--features--2eacb{margin-top:-60px}.FeatureList-module--features--2eacb>h2{margin-bottom:30px}@media (min-width:768px){.FeatureList-module--featuresContent--fcee3 h3{font-size:22px}.FeatureList-module--features--2eacb>h2{margin:0 auto 20px;max-width:450px}.FeatureList-module--features--2eacb{margin-bottom:60px;margin-top:60px}.FeatureList-module--featuresContent--fcee3{grid-column-gap:30px;display:grid;grid-template-columns:repeat(3,1fr);margin:40px auto 30px;max-width:1024px}}@media (min-width:1280px){.FeatureList-module--featuresContent--fcee3{grid-column-gap:25px;grid-template-columns:repeat(6,1fr);max-width:1480px}.FeatureList-module--featuresContent--fcee3>article{padding-bottom:0}}.HomePage-module--root--2dfd3{padding:0 20px 50px;position:relative}.HomePage-module--feedback--3ca4e{margin-top:40px}.HomePage-module--feedback--3ca4e>div{border-radius:15px;margin-bottom:20px}.HomePage-module--feedback--3ca4e svg{margin:0 auto 10px;width:45px}.HomePage-module--feedback--3ca4e>div>p{font-size:15px;padding:20px 0;text-align:left}@media (min-width:768px){.HomePage-module--feedback--3ca4e{grid-gap:50px;display:grid;grid-template-columns:repeat(3,1fr)}.HomePage-module--feedback--3ca4e>div{margin-bottom:0}}@media (min-width:1024px){.HomePage-module--root--2dfd3{padding:0 50px}}.sponsorsList-module--root--0ad1a{border-top:1px solid var(--color-black);font-size:.8rem;margin:1rem 0;padding-top:1.5rem;text-align:center}.sponsorsList-module--heading--30920{font-weight:500;margin-bottom:2rem;opacity:.7}.sponsorsList-module--root--0ad1a a{align-content:center;color:#fff;display:flex;justify-content:center;text-decoration:none}.sponsorsList-module--root--0ad1a a img{height:24px;margin:auto 0;width:120px}.sponsorsList-module--logoGroup--42b9a{display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr);margin:0 1rem}.sponsorsList-module--logoGroup--42b9a>div{border-radius:4px;padding:.5rem}.sponsorsList-module--placeholder--789ee{border:1px dashed #ccc;border-radius:4px;padding:.5rem}@media (min-width:768px){.sponsorsList-module--logoGroup--42b9a{display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr);margin:0 auto;max-width:384px}}.GetStarted-module--installCode--c8078{background:var(--color-button-blue)!important;border-radius:4px;display:block;margin-top:20px;padding:13px 20px}.GetStarted-module--lightInstallCode--870e9{background:#fff!important;border:1px solid var(--color-black)}.GetStarted-module--copyButton--0315d{background:var(--color-light-blue);border:1px solid transparent;color:#fff;cursor:pointer;display:none;float:right;font-size:13px;margin-top:-2px;text-transform:uppercase}.GetStarted-module--copyButton--0315d:hover{background:none;border:1px solid var(--color-secondary);color:#fff}.GetStarted-module--copyButton--0315d:hover span{background:var(--color-primary)}@media (min-width:768px){.GetStarted-module--copyButton--0315d{display:inline-block}}.DevTools-module--container--78149{display:grid}.DevTools-module--devToolImg--b682c{border-radius:5px;cursor:not-allowed;display:block;height:230px;margin:30px auto 80px}.DevTools-module--devTool--c1e41 ::-webkit-scrollbar-track{background:inherit}.DevTools-module--devTool--c1e41 ::-webkit-scrollbar-thumb{background:grey}.DevTools-module--devTool--c1e41 ::-webkit-scrollbar-thumb:hover{background:#000}.DevTools-module--demo--aaa32{grid-gap:30px;display:grid;margin:0 auto;max-width:768px}.DevTools-module--demo--aaa32>div:first-child{order:2}@media (min-width:768px){.DevTools-module--devToolImg--b682c{border-radius:8px;display:block;height:auto;margin:50px auto 0;max-width:600px;min-height:420px}.DevTools-module--demo--aaa32{grid-gap:30px;display:grid;grid-template-columns:1fr 1fr;margin:0 auto;max-width:768px}.DevTools-module--demo--aaa32>div:first-child{order:0}}@media (min-width:1024px){.DevTools-module--devTool--c1e41{display:block}.DevTools-module--devToolImg--b682c{max-width:800px}}.TabGroup-module--buttonTabGroup--8d4be{display:grid;grid-auto-flow:column}.TabGroup-module--buttonTabGroup--8d4be>button{background:var(--color-primary);background:#000;border:none;border-top:1px solid var(--color-secondary);color:#fff;font-size:12px;padding:5px 8px;text-transform:uppercase;transition:all .3s}.TabGroup-module--buttonTabGroup--8d4be>button:nth-child(n+2){margin-left:3px}.TabGroup-module--buttonTabGroup--8d4be>button:hover{background:var(--color-secondary)}.TabGroup-module--buttonTabGroup--8d4be>button:disabled{background:var(--color-primary);cursor:not-allowed}.TabGroup-module--lightButtonTabGroup--3b858>button{background:#fff;color:var(--color-black)}.TabGroup-module--lightButtonTabGroup--3b858>button:disabled,.TabGroup-module--lightButtonTabGroup--3b858>button:hover{color:#fff}@media (min-width:768px){.TabGroup-module--buttonTabGroup--8d4be>button{padding:5px 20px}}.table-module--table--af452{border-collapse:collapse;margin-top:15px}.table-module--table--af452 td{line-height:1.4;padding:6px 15px 6px 0}.table-module--table--af452 td>h5:first-child,.table-module--table--af452 td>p:first-child,.table-module--table--af452 td>ul li:first-child>p,.table-module--table--af452 td>ul:first-child{margin-top:0!important}.table-module--table--af452 td>p:last-child{margin-bottom:0}.table-module--table--af452 td:last-child{padding-right:0}.table-module--table--af452 td>pre{margin:0}.table-module--tableWrapper--3fbf6{-webkit-overflow-scrolling:touch;overflow-x:auto;overflow-y:hidden}@media (min-width:768px){.table-module--mobileTypeText--66d0c{display:inline;margin-top:0}.table-module--tableWrapper--3fbf6::-webkit-scrollbar{height:8px}.table-module--tableWrapper--3fbf6::-webkit-scrollbar-track{background:var(--color-button-blue);border-radius:10px}.table-module--tableWrapper--3fbf6::-webkit-scrollbar-thumb{background:var(--color-medium-blue);border-radius:10px}.table-module--tableWrapper--3fbf6::-webkit-scrollbar-thumb:hover{background:var(--color-light-pink)}}.ApiGallery-module--root--04f03{margin:60px auto 0;max-width:768px}@media (min-width:768px){.ApiGallery-module--root--04f03{max-width:840px}}.ApiGallery-module--gallery--3a171{grid-gap:25px;display:grid;grid-template-columns:1fr;list-style:none;margin:20px;padding:0}@media (min-width:768px){.ApiGallery-module--gallery--3a171{grid-gap:25px;grid-template-columns:repeat(3,1fr);margin:60px auto;padding:0 20px}}@media (min-width:1024px){.ApiGallery-module--gallery--3a171{max-width:1024px}}.ApiGallery-module--gallery--3a171 li{border:1px solid var(--color-light-blue);padding-bottom:30px;position:relative;transition:all .2s}.ApiGallery-module--gallery--3a171 li:hover{border:1px solid var(--color-secondary);box-shadow:2px 2px 0 4px #000;-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}.ApiGallery-module--gallery--3a171 li a{align-items:flex-end;bottom:0;display:flex;font-size:14px;justify-content:flex-end;left:0;padding:12px 20px 12px 80px;position:absolute;right:0;top:0}.ApiGallery-module--gallery--3a171 h3{background:var(--color-button-blue);border-bottom:1px solid var(--color-light-blue);font-size:18px;font-weight:400;letter-spacing:1px;margin:0;padding:13px 20px;text-shadow:2px 2px #000}.ApiGallery-module--gallery--3a171 h3 code{letter-spacing:-1px;margin-right:5px}.ApiGallery-module--gallery--3a171 p{font-size:14px;margin:20px}.ApiGallery-module--versionControl--705b0{padding-right:20px;text-align:right}.ApiGallery-module--versionControl--705b0>div{display:inline-block}.ApiGallery-module--versionControl--705b0>p{color:var(--color-light-grey);display:inline-block;font-size:14px;margin-right:20px}.selectNav-module--root--32ed6{-webkit-appearance:none;appearance:none;background:none;border:1px solid var(--color-light-blue);border-radius:3px;color:#fff;cursor:pointer;margin-top:1rem;padding-left:15px;padding-right:15px;position:relative;width:100%}.selectNav-module--root--32ed6:hover{border:1px solid var(--color-secondary)}.selectNav-module--root--32ed6>option{color:#000}@media (min-width:768px){.selectNav-module--root--32ed6{display:none}}.ApiRefTable-module--fieldset--d584d{border:1px solid var(--color-light-blue);border-radius:4px;padding:10px 15px}.ApiRefTable-module--fieldset--d584d>legend{padding:0 10px}.ApiRefTable-module--fieldset--d584d>label{cursor:pointer;display:block;padding-bottom:15px}.ApiRefTable-module--fieldset--d584d>label:nth-child(2){padding-top:10px}.ApiRefTable-module--fieldset--d584d>label>input{margin-right:10px;position:relative;top:-2px}
Resources | React Hook Form - Simple React forms validation Skip to content
Resources Articles/Blog, Videos & Newsletter
Articles/Blog Videos Working with Forms in React (React Hook Form, Zod & Component Libraries) Vlad Nicula
A series of videos on how to work with forms in React focusing on React Hook Form, Zod, and component libraries.
Get your forms hooked with react-hook-form | code.talks 2022 Keren Kenzi
As Front-end developers, we all know that forms can get really messy, but what if I told you that there is a library out there that can make your life much easier. In this talk, I'll introduce react-hook-form, a library that started to gain more and more popularity. It is super light, intuitive, performant, and flexible with easy-to-use validation. We'll cover its basics through a live code example and learn about its benefits. In addition, I will share with you my thoughts about what to look for when choosing a library to use.
Get your forms hooked with react-hook-form | ReactNext 2021 Keren Kenzi
As Front-end developers, we all know that forms can get really messy, but what if I told you that there is a library out there that can make your life much easier.
React Hook Form V7 with Material UI and Typescript Tutorial | Part 5 -- Testing Leo Roese
The final part of my react-hook-form with Material UI tutorial and Typescript. This part we will be covering testing with react-testing-library and jest.
React Hook Form V7 with Material UI and Typescript Tutorial | Part 4 -- Complex Forms with State Leo Roese
In this video, I will help in implementing a complex checkout form with shipping and billing information using context api.
React Hook Form V7 with Material UI and Typescript Tutorial | Part 3 -- useFieldArray Leo Roese
In this video, I will help in understanding useFieldArray to create dynamic lists or tables.
React Hook Form V7 with Material UI and Typescript Tutorial | Part 2 -- FormProvider Leo Roese
In this video, I will help in understanding FormProvider and useFormContext from React Hook Form and how to use it as well as implications.
React Hook Form V7 with Material UI and Typescript Tutorial | Part 1 -- Setup Leo Roese
In this video, I will help install and understand the basics of React-Hook-Form, a library that makes working with forms an absolute breeze. We will also explore how to directly integrate this library with Typescript and UI kit libraries like Material UI.
React Hook Form V7 (Preview) Bill Luo
Introduction to React Hook From V7 (preview). Hope you will enjoy the next update
React Hook Form V7 - Get Started Bill Luo
Introduction to React Hook From V7 (preview). Hope you will enjoy the next update!
React Hook Form - custom hook for forms validation. Bill Luo
In this video tutorial, I am demonstrating how you can use react-hook-form to easily validate your forms.
React Hook Form - persist multiple steps forms (Form Wizard). Bill Luo
Building persist multiple steps form with React Hook Form.
React Hook Form Tutorial | Why it's Useful Redhwan Nacef
I feel like forms in react can get quite complicated. React hook form makes it slightly easier. This is a tutorial on how and why to use react hook form.
React Hook Form - React Forms Episode II Jack Herrington
Let's get back into forms and look at your recommendation `react-hook-form`!
Flexible Forms with React Hook Form Jack Herrington
Learn about how to make forms with flexible sections, and also to use Module Federation to load in those form sections via dependency injection.
Expando Forms in React Hook Form Jack Herrington
Learn how to make forms that expand to add new sections dynamically.
The best way to create forms in React Maksim Ivanov
How to create forms in React. Right now the best way to create forms in React is to use React Form Hook library.
Easy Way of Form Validation with React Hook Form For Those Who Code
In this video we will cover basics on how to validate form fields in React with React hook forms which is performant and really easy library to use.
React Hook Form で簡単にフォームバリデーション: TypeScriptでReact.js入門#07 WEBOTV / WEBプログラム学習チャンネル
TypeScriptでReact.js入門をする講座 第7回目です。 今回はReact Hook Formというライブラリを使用して入力フォームのチェック(バリデーション)を設定する方法をご紹介します。
Make React Forms EASY with React Hook Form! Eric Murphy
Are you tired of the slow, painful process of setting up forms in React, building out form state, validation, errors, and more? Worry no more! With React Hook Form, create forms in a matter of minutes! It'll be the easiest, fastest way you've ever built a form in React! Replace your old, boring
How to test react hook form using react testing library Maksim Ivanov
How to test react hook form using react testing library:
React Hook Form Tutorial - How to Create a Custom Input Maksim Ivanov
Let's learn how to create a custom input for react-hook-form. We will use a simple login form as an example React application.
How To Upload Files Using React Hook Form Maksim Ivanov
React-hook-form supports file uploads. In this video I'll show you how to upload files using react-hook-form. And also we'll update the firebase file upload example with react-hook-form
Using React Hook Form with Ionic React Components Aaron Saunders
Using React Hook Form with Ionic Framework React Components - this is based on the blog post
React Hook Form Talk and Demo by its Author Bill Luo aka@bluebill1049 ReactEurope
#04 Curso de React Hooks [ React Hook Form ] Bluuweb !
Does this library make Redux Form obsolete? | React Hook Form Tutorial | React Tutorials Better Coding Academy
React Hook Form File Upload Tutorial - Upload Files to NodeJS API Maksim Ivanov
React Hook Form tutorial on how to upload files to an ExpressJS API.
How to Validate File Uploads With React Hook Form Maksim Ivanov
In this video I show how to validate the file field in React using Yup and React Hook Form.
React Hook Form - Dependent Fields Using Watch Maksim Ivanov
How to implement dependent fields using react hook form.
Multi Step Wizard Form Using React Hook Form and Redux Toolkit Maksim Ivanov
We'll use Redux Toolkit and React Hook Form to create a multi step react form to order pizza.
Form validation with Next.js/React part 2 EinCode
Creating a User Registration form with react-hook-form Leigh Halliday
We'll create a User Registration Form in Next.js using react-hook-form, testing its validation with react testing library.
How to use React Hook Form with Material UI (and every other external library) Eric Murphy
Adding in fields from external libraries isn't as easy as just copy & pasting it in with React Hook Form. Here's how to add external libraries like Material UI, Ant Design, react-datepicker, react-select, and more with React Hook Form's Controller element. Also, how to fix stupid bugs with the Controller since React Hook Form v6.
Tutorial React Hook Form 🇮🇩 Sastra Nababan
Di video kita mencoba intergrasi library react hook form dengan register form.
Newsletter Thank you for your support If you find React Hook Form to be useful in your project, please consider to star and support it.
Star us on GitHub