Switch.tsx

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

// Define type of properties
interface Props {
    tintColor: string;
    enabled: boolean;
    height: number;
    width: number;
}

interface States {
    enabled: boolean;
}

export class Switch extends React.Component<Partial<Props>, States> {
    // Set default properties
    static defaultProps = {
        width: 80,
        height: 44,
        tintColor: "#5C6061",
        enabled: false
    };

    static propertyControls: PropertyControls<Props> = {
        enabled: { type: ControlType.Boolean, title: "Enabled" },
        tintColor: { type: ControlType.Color, title: "Tint" }
    };

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

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

    handleClick = () => {
        this.setState({
            enabled: !this.state.enabled
        });
    };

    render() {
        return (
            <div
                onClick={this.handleClick}
                style={Object.assign(
                    {
                        background: this.state.enabled
                            ? this.props.tintColor
                            : "#DFE2E3"
                    },
                    toggleCompStyle
                )}
            >
                <div
                    style={Object.assign(
                        {
                            left: this.state.enabled
                                ? this.props.width - 38 + "px"
                                : "6px",
                            boxShadow: "0 1px 5px 0 rgba(0,0,0,0.25)"
                        },
                        toggleElStyle
                    )}
                />
            </div>
        );
    }
}

// Styles
const toggleCompStyle: React.CSSProperties = {
    width: "100%",
    height: "44px",
    borderRadius: "40px",
    position: "relative",
    transition: "all 0.2s"
};

const toggleElStyle: React.CSSProperties = {
    position: "absolute",
    top: "6px",
    width: "32px",
    height: "32px",
    borderRadius: "40px",
    background: "white",
    transition: "all 0.2s"
};