https://learnreact.design/_next/static/chunks/pages/tips/text-input-keypress-2b74c0f02e9f4c788599.js

1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[167,222],{"0dTa":function(e,t,a){"use strict";a.r(t),a.d(t,"meta",(function(){return s})),a.d(t,"default",(function(){return m}));var n=a("wx14"),c=a("Ff2n"),o=(a("q1tI"),a("7ljp")),p=a("9sEH"),s=(a("qKvR"),{date:"2018-10-20",title:'Integrate text input: "Press enter" keyboard event',tags:["Code","Code Component","Code Overrides","Framer"],sourceFile:"https://www.dropbox.com/s/z9akwyooszaru7z/text-input-keypress.framerx?dl=0",tweet:null,video:"text-input-keypress.mp4",videoPoster:"text-input-keypress.mp4.jpg",slug:"text-input-keypress"}),r={meta:s},i=p.a;function m(e){var t=e.components,a=Object(c.a)(e,["components"]);return Object(o.b)(i,Object(n.a)({},r,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("h2",{id:"overview"},"Overview"),Object(o.b)("p",null,"This is the same idea as the ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/tips/simple-text-input"}),'"onChange" example'),"."),Object(o.b)("p",null,"The text input here is a standard HTML ",Object(o.b)("inlineCode",{parentName:"p"},"<input>")," which supports ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/Events/keypress"}),Object(o.b)("inlineCode",{parentName:"a"},"keypress")," event"),". We can wrap this in a code component and expose ",Object(o.b)("inlineCode",{parentName:"p"},"onAccept")," as a prop. In the code override, we can hook into ",Object(o.b)("inlineCode",{parentName:"p"},"onAccept")," in the same way as ",Object(o.b)("inlineCode",{parentName:"p"},"onTap"),", and use the updated text accordingly."),Object(o.b)("p",null,Object(o.b)("strong",{parentName:"p"},"Note:")," Also check out ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/2020/03/31/react-mental-models-working-with-input"}),"this post")," for general tips on working with ",Object(o.b)("inlineCode",{parentName:"p"},"input")," in React."),Object(o.b)("h2",{id:"textinput"},Object(o.b)("inlineCode",{parentName:"h2"},"TextInput")),Object(o.b)("pre",{className:"language-jsx"},Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx"}),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"class")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token class-name"}),"TextInput")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"extends")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token class-name"}),"React",Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"."),"Component")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token spread operator"}),"..."),"\n  ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token method-variable function-variable method function property-access"}),"handleKeyPress")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token parameter"}),"e")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token arrow operator"}),"=>")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"{"),"\n    ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token comment"}),"// We pass the new value of the text when calling onAccept"),"\n    ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"if")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"("),"e",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"."),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token property-access"}),"key")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"===")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"Enter"'),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),")")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"{"),"\n      ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"const")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"{")," onAccept ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"this"),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"."),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token property-access"}),"props"),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),";"),"\n      onAccept ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"&&")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token function"}),"onAccept"),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"("),"e",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"."),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token property-access"}),"target"),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"."),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token property-access"}),"value"),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),")"),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),";"),"\n    ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}"),"\n  ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}"),"\n  ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token function"}),"render"),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"("),Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),")")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"{"),"\n    ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"return")," ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"("),"\n      ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token comment"}),'// Note we need to use "onKeyPress" instead of "onkeypress"'),"\n      ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token comment"}),"// as in HTML."),"\n      ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"<"),"input")," ",Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token attr-name"}),"type"),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token attr-value"}),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"="),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),'"'),"text",Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),'"'))," ",Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token attr-name"}),"onKeyPress"),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token script language-javascript"}),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token script-punctuation punctuation"}),"="),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{"),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token keyword"}),"this"),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"."),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token property-access"}),"handleKeyPress"),Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"))," ",Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"/>")),"\n    ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),")"),"\n  ",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}"),"\n",Object(o.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),Object(o.b)("h2",{id:"notes"},"Notes"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},'"Enter" is just one of the keys that we can handle in ',Object(o.b)("inlineCode",{parentName:"li"},"onKeyPress"),", find a list of other keys ",Object(o.b)("a",Object(n.a)({parentName:"li"},{href:"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values"}),"here"),"."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"onKeyPress")," is just one of the supported keyboard events. We can also use ",Object(o.b)("inlineCode",{parentName:"li"},"onKeyDown")," or ",Object(o.b)("inlineCode",{parentName:"li"},"onKeyUp")," depending on the use case.")))}m.isMDXComponent=!0},"9sEH":function(e,t,a){"use strict";a.d(t,"a",(function(){return b}));var n=a("ODXe"),c=(a("q1tI"),a("9ixD")),o=a("soUV"),p=a("f4y1"),s=a("YfHv"),r=a("Aiso"),i=a.n(r),m=a("9qq+"),d=a("MamX"),l=a("qKvR"),b=function(e){var t=e.children,a=e.meta||{},r=a.title,b=a.slug,u=a.description,j=a.videoPoster,O=a.video,g=a.sourceFile,x=a.tags,h=a.date,N=Object(d.a)(b,O,j),f=Object(n.a)(N,2),y=f[0],k=f[1];

1return Object(l.c)(o.a,null,Object(l.c)(c.b,{title:r,description:u}),Object(l.c)(p.a,null,Object(l.c)("div",{className:"w-11/12 max-w-prose mx-auto space-y-10 leading-loose "},Object(l.c)("div",{className:"my-10 flex flex-col justify-center items-center space-y-8 md:my-16 lg:max-w-2xl lg:my-24 xl:max-w-3xl  xl:my-36 "},Object(l.c)("h1",{className:"font-bold leading-tight text-center text-2xl sm:text-4xl xl:text-5xl "},r),Object(l.c)("div",{className:"flex space-x-2 text-sm"},x.map((function(e){return Object(l.c)(m.b,{key:"tag"},e)})),Object(l.c)("div",{className:"pl-8"},"Updated: ",h))," "),y&&k?Object(l.c)(s.a,{videoUrl:y,posterUrl:k,play:!0,width:640,height:360}):k&&Object(l.c)(i.a,{src:k,width:640,height:360}),t,g&&Object(l.c)("div",null,Object(l.c)("h2",{className:"text-3xl font-bold my-3 "},"Source Code"),Object(l.c)(m.e,{href:g},Object(l.c)("a",null,"Check out the complete source code here"))))))}},BsWD:function(e,t,a){"use strict";a.d(t,"a",(function(){return c}));var n=a("a3WO");function c(e,t){if(e){if("string"===typeof e)return Object(n.a)(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?Object(n.a)(e,t):void 0}}},MamX:function(e,t,a){"use strict";a.d(t,"a",(function(){return o}));var n=a("ODXe"),c=a("q1tI");function o(e,t,o){var p=Object(c.useState)(),s=p[0],r=p[1],i=Object(c.useState)(),m=i[0],d=i[1];return Object(c.useEffect)((function(){Promise.all([t?a("fjgo")("./".concat(e,"/").concat(t)):null,o?a("fjgo")("./".concat(e,"/").concat(o)):null]).then((function(e){var t=Object(n.a)(e,2),a=t[0],c=t[1];a&&r(a.default),c&&d(c.default)}))}),[e,t]),[s,m]}},ODXe:function(e,t,a){"use strict";a.d(t,"a",(function(){return c}));var n=a("BsWD");function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!==typeof Symbol&&Symbol.iterator in Object(e)){var a=[],n=!0,c=!1,o=void 0;try{for(var p,s=e[Symbol.iterator]();!(n=(p=s.next()).done)&&(a.push(p.value),!t||a.length!==t);n=!0);}catch(r){c=!0,o=r}finally{try{n||null==s.return||s.return()}finally{if(c)throw o}}return a}}(e,t)||Object(n.a)(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},YfHv:function(e,t,a){"use strict";a.d(t,"a",(function(){return s}));var n=a("wx14"),c=a("Ff2n"),o=a("q1tI"),p=a("qKvR");function s(e){var t=e.play,a=void 0===t||t,s=e.videoUrl,r=e.posterUrl,i=Object(c.a)(e,["play","videoUrl","posterUrl"]),m=o.useRef(null);return o.useEffect((function(){var e=m.current;e&&(a?e.play():e.pause())}),[a,m]),Object(p.c)("video",Object(n.a)({ref:m,src:s,autoPlay:!1,loop:!0,muted:!0,playsInline:!0,poster:r},i))}},a3WO:function(e,t,a){"use strict";function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}a.d(t,"a",(function(){return n}))},fjgo:function(e,t,a){var n={"./":["Q/Sp",16],"./add-anchor-point-anywhere/cmd-add-anchor-point.mp4":["67tX",262],"./add-anchor-point-anywhere/cmd-add-anchor-point.mp4.jpg":["Id6X",263],"./add-anchor-point-anywhere/index.mdx":["LPtZ",0,187],"./add-frame-predefined-size/create-frame.mp4":["dQAr",264],"./add-frame-predefined-size/create-frame.mp4.jpg":["Rfc9",265],"./add-frame-predefined-size/index.mdx":["A5Y2",0,188],"./add-frame-same-size/create-frame-same-size.mp4":["IjSB",266],"./add-frame-same-size/create-frame-same-size.mp4.jpg":["b6gD",267],"./add-frame-same-size/index.mdx":["wYeK",0,189],"./add-image/index.mdx":["/v6y",0,190],"./animate-onload/animate-onload.mp4":["kJgr",268],"./animate-onload/animate-onload.mp4.jpg":["m9os",269],"./animate-onload/index.mdx":["w0Sw",0,191],"./change-default-code-editor/index.mdx":["gFce",0,192],"./children-connectors/children-connectors.mp4":["VRIy",270],"./children-connectors/children-connectors.mp4.jpg":["sfXe",271],"./children-connectors/index.mdx":["3bFR",0,19],"./children-connectors/multi-connector-with-titles.png":["IlmQ",272],"./cmd-select-item/cmd-select.mp4":["nHR2",273],"./cmd-select-item/cmd-select.mp4.jpg":["VdTr",274],"./cmd-select-item/index.mdx":["Ua0k",0,193],"./color-picker/color-picker.mp4":["5CtH",275],"./color-picker/color-picker.mp4.jpg":["Ou4M",276],"./color-picker/index.mdx":["euQB",0,194],"./commenting-in-javascript-react/index.mdx":["u9SM",0,195],"./copy-from-sketch/copy-from-sketch.mp4":["wwBB",277],"./copy-from-sketch/copy-from-sketch.mp4.jpg":["kRTb",278],"./copy-from-sketch/index.mdx":["+WhY",0,196],"./crop-image/crop-image.mp4":["pVX5",279],"./crop-image/crop-image.mp4.jpg":["dab6",280],"./crop-image/index.mdx":["Rh6N",0,197],"./custom-fonts/custom-fonts.mp4":["yrII",281],"./custom-fonts/custom-fonts.mp4.jpg":["cbS8",282],"./custom-fonts/font-manager.png":["Lfjk",283],"./custom-fonts/index.mdx":["Dc9/",0,180],"./day-night-mode/day-night-mode.mp4":["i/6O",284],"./day-night-mode/day-night-mode.mp4.jpg":["OkQl",285],"./day-night-mode/index.mdx":["h1kh",0,198],"./disable-auto-parenting/cmd-disable-auto-parenting.mp4":["hcN5",286],"./disable-auto-parenting/cmd-disable-auto-parenting.mp4.jpg":["YySF",287],"./disable-auto-parenting/index.mdx":["z91a",0,199],"./dropdown-menu-effect/dropdown-menu-distorted.gif":["tXF7",288],"./dropdown-menu-effect/dropdown-menu.mp4":["5as/",289],"./dropdown-menu-effect/dropdown-menu.mp4.jpg":["CiQO",290],"./dropdown-menu-effect/index.mdx":["UYA8",0,18],"./dropdown-menu-effect/menu-layers.png":["Uf8N",291],"./duration-unit/index.mdx":["uhz7",0,200],"./export-web-preview/index.mdx":["MvV6",0,201],"./fluid-grid/fluid-grid-inspect.jpeg":["9z9u",292],"./fluid-grid/fluid-grid.mp4":["l7bG",293],"./fluid-grid/fluid-grid.mp4.jpg":["

1Nv+M",294],"./fluid-grid/index.mdx":["8Nn7",0,181],"./git-integration/framerfx.png":["/EJQ",295],"./git-integration/framerx-folder.png":["huPN",296],"./git-integration/index.mdx":["bL9B",0,179],"./git-integration/save-as.png":["SzRx",297],"./hold-shift-while-drawing/hold-shift.mp4":["VF35",298],"./hold-shift-while-drawing/hold-shift.mp4.jpg":["h8dE",299],"./hold-shift-while-drawing/index.mdx":["rEjT",0,202],"./hover-css/hover-css.mp4":["LvI3",300],"./hover-css/hover-css.mp4.jpg":["bHeZ",301],"./hover-css/index.mdx":["FmVU",0,203],"./hover-pose/hover-pose.mp4":["BvBs",302],"./hover-pose/hover-pose.mp4.jpg":["K8KI",303],"./hover-pose/index.mdx":["j1XD",0,204],"./hover-react-spring/hover-react-spring.mp4":["OW1+",304],"./hover-react-spring/hover-react-spring.mp4.jpg":["3IDD",305],"./hover-react-spring/index.mdx":["sEVe",0,205],"./hover-styled-components/hover-css.mp4":["KM1+",306],"./hover-styled-components/hover-css.mp4.jpg":["H1Xo",307],"./hover-styled-components/index.mdx":["LRlN",0,206],"./import-json/import-json-error.png":["6WEi",308],"./import-json/index.mdx":["CXEp",0,182],"./index":["Q/Sp",16],"./index.tsx":["Q/Sp",16],"./install-npm-packages/index.mdx":["mkE4",0,207],"./internal-components/default-export-warning.png":["Y2cu",309],"./internal-components/index.mdx":["cwCM",0,183],"./keep-page-and-slider-in-sync/index.mdx":["lJ6/",0,208],"./keep-page-and-slider-in-sync/page-and-slider.mp4":["wIPt",310],"./keep-page-and-slider-in-sync/page-and-slider.mp4.jpg":["Z3js",311],"./layout-with-stack-then-remove/index.mdx":["/Tki",0,209],"./layout-with-stack-then-remove/use-and-remove-stack.mp4":["R/dr",312],"./layout-with-stack-then-remove/use-and-remove-stack.mp4.jpg":["EspQ",313],"./local-resources/index.mdx":["NDER",0,184],"./local-resources/local-resources.png":["O+X6",314],"./material-app-bar/index.mdx":["b3Aw",0,210],"./material-app-bar/material-app-bar.mp4":["xHJs",315],"./material-app-bar/material-app-bar.mp4.jpg":["QODL",316],"./media/better-menu.mp4":["46ag",317],"./media/better-menu.mp4.jpg":["3XjL",318],"./media/draggable.mp4":["cbe7",319],"./media/draggable.mp4.jpg":["c/Kl",320],"./media/menu-layers.jpg":["l2uk",321],"./page-hint/index.mdx":["3R+3",0,211],"./page-hint/page-hint.mp4":["1LYQ",322],"./page-hint/page-hint.mp4.jpg":["pajx",323],"./page-in-overlay/index.mdx":["hY6D",0,212],"./page-in-overlay/page-in-overlay.mp4":["rjQP",324],"./page-in-overlay/page-in-overlay.mp4.jpg":["uEjf",325],"./preview-1-1/index.mdx":["YcG3",0,213],"./preview-1-1/preview-1-1.mp4":["lzp9",326],"./preview-1-1/preview-1-1.mp4.jpg":["WWlF",327],"./preview-in-any-browser/index.mdx":["0RTe",0,214],"./react-developer-tool/chrome-dev-tools.png":["c5m7",328],"./react-developer-tool/index.mdx":["+bcQ",0,185],"./resize-ignore-position-pins/cmd-to-ignore-pins.mp4":["AXH5",329],"./resize-ignore-position-pins/cmd-to-ignore-pins.mp4.jpg":["WnvN",330],"./resize-ignore-position-pins/index.mdx":["8D1o",0,215],"./schedule-with-timeout/index.mdx":["N8A9",0,216],"./schedule-with-timeout/schedule-with-timeout.mp4":["KZng",331],"./schedule-with-timeout/schedule-with-timeout.mp4.jpg":["BYfo",332],"./select-parent/escape-to-select-parent.mp4":["bAfH",333],"./select-parent/escape-to-select-parent.mp4.jpg":["B0lk",334],"./select-parent/index.mdx":["FQIL",0,217],"./simple-text-input/index.mdx":["P3+m",0,218],"./simple-text-input/text-input.mp4":["/v3I",335],"./simple-text-input/text-input.mp4.jpg":["yYh1",336],"./splash-screen/index.mdx":["Vqd6",0,186],"./splash-screen/page-component.png":["oamK",337],"./splash-screen/splash-screen.mp4":["nxpA",338],"./splash-screen/splash-screen.mp4.jpg":["tTI0",339],"./staggered-animation/index.mdx":["XRFE",0,219],"./staggered-animation/staggered.mp4":["UUTo",340],"./staggered-animation/staggered.mp4.jpg":["0jYE",341],"./switch-overlay-all-manual/index.mdx":["b1uA",0,220],"./switch-overlay-all-manual/switch-between-overlays.mp4":["oQp0",342],"./switch-overlay-all-manual/switch-between-overlays.mp4.jpg":["8mfr",343],"./symbol-link/index.mdx":["WGJe",0,221],"./text-input-change-text-from-outside/change-input-text-from-outside.mp4":["SLF3",344],"./text-input-change-text-from-outside/change-input-text-from-outside.mp4.jpg":["s3yZ",345],"./text-input-change-text-from-outside/index.mdx":["UYqI",0,20],"./text-input-keypress/index.mdx":["0dTa",0,222],"./text-input-keypress/text-input-keypress.mp4":["/MPi",346],"./text-input-keypress/text-input-keypress.mp4.jpg":["CBlf",347],"./text-input-mobile-keyboard/index.mdx":["d1+E",0,223],"./text-input-mobile-keyboard/text-input-android-keyboard.mp4":["yLch",348],"./text-input-mobile-keyboard/text-input-android-keyboard.mp4.jpg":["FpDW",349],"./text-wrap/index.mdx":["8p/0",0,224],"./text-wrap/text-wrapping.mp4":["ypRf",350],"./text-wrap/text-wrapping.mp4.jpg":["gFG+",351],"./themeProvider-styled-components/index.mdx":["afCF",0,225],"./themeProvider-styled-components/theme-provider.mp4":["b+lb",352],"./themeProvider-styled-components/theme-provider.mp4.jpg":["ffMa",353],"./toggle-handles/index.mdx":["QtBK",0,226],"./toggle-handles/option-toggle-control-point-modes.mp4":["OU29",354],"./toggle-handles/option-toggle-control-point-modes.mp4.jpg":["jSJl",355],"./vector-in-design-component/edit-instance-vector.mp4":["12jc",356],"./vector-in-design-component/edit-instance-vector.mp4.jpg":["cbTE",357],"./vector-in-design-component/index.mdx":["DjFP",0,227],"./vsc-multi-select/index.mdx":["BzD6",0,228],"./vsc-multi-select/multi-cursor.mp4":["0Er3",358],"./vsc-multi-select/multi-cursor.mp4.jpg":["baRK",359],"./vue/index.mdx":["uq4T",0,229],"./why-all-buttons-bounce-1/all-buttons-bounce.mp4":["Uz+h",360],"./why-all-buttons-bounce-1/all-buttons-bounce.mp4.jpg":["KrOZ",361],"./why-all-buttons-bounce-1/index.mdx":["UoWg",0,21],"./why-all-buttons-bounce-2/all-buttons-bounce.mp4":["mA6k",362],"./why-all-buttons-bounce-2/all-buttons-bounce.mp4.jpg":["YmTl",363],"./w

1hy-all-buttons-bounce-2/index.mdx":["jQtC",0,230],"./width-height-props/index.mdx":["KdD2",0,231]};function c(e){if(!a.o(n,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=n[e],c=t[0];return Promise.all(t.slice(1).map(a.e)).then((function(){return a(c)}))}c.keys=function(){return Object.keys(n)},c.id="fjgo",e.exports=c},soUV:function(e,t,a){"use strict";a.d(t,"a",(function(){return i}));a("q1tI");var n=a("qKvR");function c(){return Object(n.c)("footer",{className:"bg-gray-900 text-white w-full py-12 mt-8"},Object(n.c)("div",{className:"max-w-max mx-auto md:ml-16"},"(c) LearnReact.design 2021"))}var o=a("jrVH"),p=a("9ixD"),s=a("29X9"),r=a("20a2");function i(e){var t=e.children,a=Object(r.useRouter)(),i=s.siteUrl+a.pathname;return Object(n.c)("div",{className:"min-h-screen flex flex-col"},Object(n.c)(p.b,{canonical:i,openGraph:{url:i}}),Object(n.c)(o.a,null),Object(n.c)("div",{className:"flex-1"},t),Object(n.c)(c,null))}},ukQl:function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/tips/text-input-keypress",function(){return a("0dTa")}])}},[["ukQl",1,2,0,3,4,5]]]);