Code Component
Code Overrides
Framer X

Integrate text input: "Press enter" keyboard event


This is the same idea as the “onChange” example.

The text input here is a standard HTML <input> which supports keypress event. We can wrap this in a code component and expose onAccept as a prop. In the code override, we can hook into onAccept in the same way as onTap, and use the updated text accordingly.

Note: Also check out this post for general tips on working with input in React.


class TextInput extends React.Component {
  handleKeyPress = e => {
    // We pass the new value of the text when calling onAccept
    if (e.key === "Enter") {
      const { onAccept } = this.props;
      onAccept && onAccept(;
  render() {
    return (
      // Note we need to use "onKeyPress" instead of "onkeypress" 
      // as in HTML.
      <input type="text" onKeyPress={this.handleKeyPress} />


  • “Enter” is just one of the keys that we can handle in onKeyPress, find a list of other keys here.
  • onKeyPress is just one of the supported keyboard events. We can also use onKeyDown or onKeyUp depending on the use case.

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!

© 2021 jimu Labs, Inc.