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

Code Component
Code Overrides
Updated: 2018-10-11


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.


class TextInput extends React.Component {
  handleChange = e => {
    const { onChange } = this.props;
    // We pass the new value of the text when calling onChange
    onChange && onChange(;
  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,


  • 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!

Source Code

Check out the complete source code here