";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}
Controller | React Hook Form - Simple React forms validation Skip to content
Controller Wrapper component for controlled inputs
Controller: Component
React Hook Form embraces uncontrolled components and native inputs, however it's hard to avoid working with external controlled component such as React-Select , AntD and MUI . This wrapper component will make it easier for you to work with them.
Props The following table contains information about the arguments for Controller
.
Name Type Required Description name
FieldPath
✓ Unique name of your input. control Control
control
object is from invoking useForm
. Optional when using FormProvider
.render
Function
This is a render prop . A function that returns a React element and provides the ability to attach events and value into the component. This simplifies integrating with external controlled components with non-standard prop names. Provides onChange
, onBlur
, name
, ref
and value
to the child component, and also a fieldState
object which contains specific input state.
Standard With Focus
< Controller
control= { control}
name= "test"
render= { ( {
field : { onChange, onBlur, value, name, ref } ,
fieldState : { invalid, isTouched, isDirty, error } ,
formState,
} ) => (
< Checkbox
onBlur= { onBlur}
onChange= { onChange}
checked= { value}
inputRef= { ref}
/ >
) }
/ >
< Controller
render= { ( {
field : { onChange, onBlur, value, name, ref } ,
fieldState : { invalid, isTouched, isDirty, error } ,
} ) => (
< TextField
value= { value}
onChange= { onChange}
onBlur= { onBlur}
inputRef= { ref}
/ >
) }
name= "TextField"
control= { control}
rules= { { required : true } }
/ >
defaultValue
unknown
Important: Can not apply undefined
to defaultValue
or defaultValues
at useForm
.
You need to either set defaultValue
at the field-level or useForm
's defaultValues
. undefined
is not a valid value.
If your form will invoke reset
with default values, you will need to provide useForm
with defaultValues
.
Calling onChange
with undefined
is not valid. You should use null
or the empty string as your default/cleared value instead.
rules
Object
Validation rules in the same format for register
options , which includes:
required, min, max, minLength, maxLength, pattern, validate
rules= { { required : true } }
shouldUnregister
boolean = false
Input will be unregistered after unmount and defaultValues will be removed as well.
Note: this prop should be avoided when using with useFieldArray
as unregister
function gets called after input unmount/remount and reorder.
Return The following table contains information about properties which Controller
produces.
Object Name Name Type Description field
onChange
(value: any) => void
A function which sends the input's value to the library.
field
onBlur
() => void
A function which sends the input's onBlur event to the library. It should be assigned to the input's onBlur
prop.
field
value
unknown
The current value of the controlled component.
field
name
string
Input's name being registered.
field
ref
React.Ref
A ref used to connect hook form to the input. Assign ref
to component's input ref to allow hook form to focus the error input.
fieldState
invalid
boolean
Invalid state for current input.
fieldState
isTouched
boolean
Touched state for current controlled input.
fieldState
isDirty
boolean
Dirty state for current controlled input.
fieldState
error
object
error for this specific input.
formState
isDirty
boolean
Set to true
after the user modifies any of the inputs.
Make sure to provide all inputs' defaultValues at the useForm, so hook form can have a single source of truth to compare whether the form is dirty.
Copy
const {
formState : { isDirty, dirtyFields } ,
setValue,
} = useForm ( { defaultValues : { test : "" } } ) ;
setValue ( 'test' , 'change' )
setValue ( 'test' , '' )
File typed input will need to be managed at the app level due to the ability to cancel file selection and FileList object.
formState
dirtyFields
object
An object with the user-modified fields. Make sure to provide all inputs' defaultValues via useForm, so the library can compare against the defaultValues
.
Dirty fields will not represent as isDirty
formState, because dirty fields are marked field dirty at field level rather the entire form. If you want to determine the entire form state use isDirty
instead.
formState
touchedFields
object
An object containing all the inputs the user has interacted with. formState
defaultValues
object
The value which has been set at useForm 's defaultValues or updated defaultValues via reset API.
formState
isSubmitted
boolean
Set to true
after the form is submitted. Will remain true
until the reset
method is invoked. formState
isSubmitSuccessful
boolean
Indicate the form was successfully submitted without any Promise
rejection or Error
been thrown within the handleSubmit
callback.
formState
isSubmitting
boolean
true
if the form is currently being submitted. false
otherwise.formState
isLoading
boolean
true
if the form is currently loading async default values.
Copy
const {
formState : { isLoading }
} = useForm ( {
defaultValues : async ( ) => await fetch ( '/api' )
} ) ;
formState
submitCount
number
Number of times the form was submitted. formState
isValid
boolean
Set to true
if the form doesn't have any errors.
setError
has no effect on isValid
formState, isValid
will always derived via the entire form validation result.
formState
isValidating
boolean
Set to true
during validation. formState
errors
object
An object with field errors. There is also an ErrorMessage component to retrieve error message easily.
Examples Web React Native
import React from "react" ;
import ReactDatePicker from "react-datepicker" ;
import { TextField } from "@material-ui/core" ;
import { useForm, Controller } from "react-hook-form" ;
function App ( ) {
const { handleSubmit, control } = useForm ( ) ;
return (
< form onSubmit= { handleSubmit ( data => console. log ( data) ) } >
< Controller
control= { control}
name= "ReactDatepicker"
render= { ( { field : { onChange, onBlur, value, ref } } ) => (
< ReactDatePicker
onChange= { onChange}
onBlur= { onBlur}
selected= { value}
/ >
) }
/ >
< input type= "submit" / >
< / form>
) ;
}
import ReactDatePicker from "react-datepicker" ;
import { TextField } from "@material-ui/core" ;
import { useForm, Controller } from "react-hook-form" ;
type FormValues = {
ReactDatepicker : string;
}
function App ( ) {
const { handleSubmit, control } = useForm< FormValues> ( ) ;
return (
< form onSubmit= { handleSubmit ( data => console. log ( data) ) } >
< Controller
control= { control}
name= "ReactDatepicker"
render= { ( { field : { onChange, onBlur, value, ref } } ) => (
< ReactDatePicker
onChange= { onChange}
onBlur= { onBlur}
selected= { value}
/ >
) }
/ >
< input type= "submit" / >
< / form>
) ;
}
import { Text, View, TextInput, Button, Alert } from "react-native" ;
import { useForm, Controller } from "react-hook-form" ;
export default function App ( ) {
const { control, handleSubmit, formState : { errors } } = useForm ( {
defaultValues : {
firstName : '' ,
lastName : ''
}
} ) ;
const onSubmit = data => console. log ( data) ;
return (
< View>
< Controller
control= { control}
rules= { {
required : true ,
} }
render= { ( { field : { onChange, onBlur, value } } ) => (
< TextInput
style= { styles. input}
onBlur= { onBlur}
onChangeText= { onChange}
value= { value}
/ >
) }
name= "firstName"
/ >
{ errors. firstName && < Text> This is required. < / Text> }
< Controller
control= { control}
rules= { {
maxLength : 100 ,
} }
render= { ( { field : { onChange, onBlur, value } } ) => (
< TextInput
style= { styles. input}
onBlur= { onBlur}
onChangeText= { onChange}
value= { value}
/ >
) }
name= "lastName"
/ >
< Button title= "Submit" onPress= { handleSubmit ( onSubmit) } / >
< / View>
) ;
}
Video The following video showcases what's inside Controller and how its been built.
VIDEO Tips It's important to be aware of each prop's responsibility when working with external controlled components, such as MUI, AntD, Chakra UI. Controller acts as a "spy" on your input by reporting and setting value.
onChange : send data back to hook form
onBlur : report input has been interacted (focus and blur)
value : set up input initial and updated value
ref : allow input to be focused with error
name : give input an unique name
The following codesandbox demonstrate the usages:
Do not register
input again. This component is made to take care of the registration process.
Copy
< Controller
name= "test"
render= { ( { field } ) => {
return < input { ... field} / > ;
} }
/ >
Customise what value gets sent to hook form by transforming the value during onChange
.
Copy
< Controller
name= "test"
render= { ( { field } ) => {
return < input { ... field} onChange= { ( e ) => field. onChange ( parseInt ( e. target. value) ) } / > ;
} }
/ >
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