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.


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!





© 2019 jimu Labs, Inc.