BasicFramerXcomponent.tsx

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

// Define type of properties
interface Props {
    tintColor: any;
    text: string;
}

export class BasicFramerXcomponent extends React.Component<Props> {
    // Set default properties
    static defaultProps = {
        width: 342,
        height: 60,
        tintColor: "#f45",
        text: "Hello world!"
    };

    static propertyControls: PropertyControls<Props> = {
        tintColor: { type: ControlType.Color, title: "Tint" },
        text: { type: ControlType.String, title: "Text" }
    };

    render() {
        return (
            <div
                style={{
                    ...{ background: this.props.tintColor },
                    ...basicCompStyle
                }}
            >
                <span style={basicCompSpanStyle}>{this.props.text}</span>
            </div>
        );
    }
}

// Styles
const basicCompStyle: React.CSSProperties = {
    width: "100%",
    height: "100%",
    borderRadius: "8px",
    display: "flex",
    alignItems: "center"
};

const basicCompSpanStyle: React.CSSProperties = {
    width: "100%",
    textAlign: "center",
    fontSize: "24px",
    fontWeight: "bold"
};