Code Component
Code Overrides
Framer X

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


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!

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.