InputComponent.tsx

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import styled from "styled-components";

// Styled components
const InputWrappeer = styled.div`
    display: flex;
    flex-direction: column;
`;

const InputLabel = styled.label`
    font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua,
        Georgia, serif;
    font-weight: 400;
    font-size: 18px;
    opacity: 0.8;
    margin-bottom: 16px;
`;

const Input = styled.input`
    width: 100%;
    height: 48px;
    border: none;
    transition: all 0.1s;
    padding: 0 12px;
    font-size: 18px;
    border: 2px solid #cccccc;
    &:hover {
        border: 2px solid #9c9c9c;
    }

    &:focus {
        background: #fbfbf6;
        outline: none;
        border: 2px solid #383838;
    }

    &[value]:not([value=""]):invalid {
        border: 2px solid #f45;
    }
`;

// Define type of property
interface Props {
    idName: string;
    label: string;
    inputType: string;
    value: string;
    minLength: number;
}

interface States {
    value: string;
}

export class InputComponent extends React.Component<Props, States> {
    // Set default properties
    static defaultProps = {
        width: 295,
        height: 82,
        idName: "default-input",
        label: "Input label",
        inputType: "text",
        value: "",
        minLength: 6
    };

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

    // Items shown in property panel
    static propertyControls: PropertyControls = {
        idName: { type: ControlType.String, title: "Input ID" },
        label: { type: ControlType.String, title: "Label" },
        inputType: {
            type: ControlType.Enum,
            options: ["text", "password"],
            title: "Type"
        },
        value: { type: ControlType.String, title: "Value" },
        minLength: {
            type: ControlType.Number,
            max: 20,
            min: 0,
            step: 1,
            title: "Min length"
        }
    };

    // If value was changed in
    handleChange(e) {
        this.setState({ value: e.target.value });
    }

    // If value was changed by the control
    componentWillReceiveProps(props: Props) {
        if (props.value !== this.props.value) {
            this.setState({ value: props.value });
        }
    }

    render() {
        return (
            <InputWrappeer>
                <InputLabel htmlFor={this.props.idName}>
                    {this.props.label}
                </InputLabel>
                <Input
                    onChange={e => this.handleChange(e)}
                    pattern={`.{${this.props.minLength},}`}
                    id={this.props.idName}
                    type={this.props.inputType}
                    value={this.state.value}
                />
            </InputWrappeer>
        );
    }
}