Integrate text input: get its value out when it's changed.

Overview

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

Note: This is a Framer X tip. If you are looking for a tip on how to work with input in React in general, check out this post instead.

TextInput

class TextInput extends React.Component {
  ...
  handleChange = e => {
    const { onChange } = this.props;
    // We pass the new value of the text when calling onChange
    onChange && onChange(e.target.value);
  }
  render() {
    return (
      // Note we need to use "onChange" instead of "onchange"
      // as in HTML.
      <input type="text" onChange={this.handleChange} />
    )
  }
}

App.tsx (Code override)

export const TextChange: Override = () => {
  return {
    // This is the same idea as onTap, except that we have
    // a parameter here to keep track of the input text.
    onChange(text) {
      data.text = text
    },
  }
}

export const GetText: Override = () => {
  return {
    // Change the text of the label below the text input
    text: data.text,
  }
}

Conclusion

• We can expose the change DOM event as a custom prop onChange. What other events can we use?
• We can override any prop of a component, even a "custom" prop in our own code components!