input.tsx

import * as React from "react"
import { PropertyControls, ControlType } from "framer"

const style: React.CSSProperties = {
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    textAlign: "center",
    color: "#FFF",
    overflow: "hidden",
}

interface Props {
    value: string
}

interface States {
    inputValue: string
}

export class Input extends React.Component<Props> {
    static defaultProps = {
        value: "",
    }

    static propertyControls: PropertyControls = {
        value: { type: ControlType.String, title: "Text" },
    }

    state = {
        value: this.props.value,
    }

    handleInputValue(e) {
        this.setState({
            value: e.target.value,
        })
    }

    componentWillReceiveProps(props: Props) {
        if (props.value !== this.props.value) {
            this.setState({ value: props.value })
        }
    }

    render() {
        return (
            <div>
                <input
                    value={this.state.value}
                    onChange={e => this.handleInputValue(e)}
                />
                <h1>{this.state.value}</h1>
            </div>
        )
    }
}

export default Input