LoadFromFile.tsx

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

// Define type of property
interface Props {
    json: any;
}

interface States {
    json: any;
}

export class LoadFromFile extends React.Component<Partial<Props>, States> {
    // Set default properties
    static defaultProps = {
        width: 375,
        height: 600
    };

    state = {
        json: []
    };

    // Items shown in property panel
    static propertyControls: PropertyControls = {
        json: {
            type: ControlType.File,
            allowedFileTypes: ["json"],
            title: "JSON"
        }
    };

    // Function to fetch a local JSON
    fetchJSON(jsonPath) {
        fetch(jsonPath)
            .then(response => response.json())
            .then(data => this.setState({ json: data }));
    }

    // We need this method for the very first time
    // when we drag`n`drop our component from the left panel
    componentDidMount() {
        if (this.props.json && this.props.json.length > 0) {
            console.log("componentDidMount");
            this.fetchJSON(this.props.json);
        } else {
            console.log(
                "%cPlease include JSON file",
                "background:#f45; color:#fff"
            );
        }
    }

    // Compare previous and current Prop. If they are different
    // we could make changes
    componentDidUpdate(prevProps, prevState) {
        if (prevProps.json !== this.props.json) {
            if (this.props.json.length > 0) {
                console.log("componentDidUpdate");
                this.fetchJSON(this.props.json);
            } else {
                this.setState({ json: [] });
            }
        }
    }

    render() {
        return (
            <div
                style={
                    this.props.json && this.props.json.length > 0
                        ? wrapStyle
                        : errorWrapStyle
                }
            >
                {this.props.json && this.props.json.length > 0 ? (
                    this.state.json.map((card, i) => (
                        <div
                            style={{
                                ...cardStyle,
                                ...{ backgroundImage: card.background }
                            }}
                            key={`card-${i}`}
                        >
                            <div
                                style={{
                                    ...imageStyle,
                                    ...{ backgroundImage: `url(${card.image})` }
                                }}
                            />
                            <h2 style={headerStyle}>{card.product}</h2>
                            <p style={priceStyle}>{card.price}</p>
                        </div>
                    ))
                ) : (
                    <span style={errorMsgStyle}>
                        Please include JSON file →
                    </span>
                )}
            </div>
        );
    }
}

const wrapStyle: React.CSSProperties = {
    width: "100%",
    height: "100%",
    display: "flex",
    flexDirection: "column",
    padding: "22px 22px",
    overflow: "hidden"
};

const cardStyle: React.CSSProperties = {
    boxSizing: "border-box",
    padding: "34px",
    width: "100%",
    margin: "0 0 20px",
    borderRadius: "12px"
};

const imageStyle: React.CSSProperties = {
    height: "150px",
    width: "100%",
    backgroundSize: "contain",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center"
};

const headerStyle: React.CSSProperties = {
    color: "white",
    textTransform: "uppercase",
    fontStyle: "italic",
    fontSize: "32px",
    fontWeight: 700,
    lineHeight: "90%",
    marginBottom: "14px",
    marginTop: "20px"
};

const priceStyle: React.CSSProperties = {
    color: "white",
    opacity: 0.6,
    fontSize: "20px",
    fontWeight: 700,
    margin: 0
};

// Placeholder message //
const errorWrapStyle: React.CSSProperties = {
    border: "1px solid #03f",
    background: "rgba(0,48,255, 0.1)",
    width: "100%",
    height: "100%",
    display: "flex",
    alignItems: "center"
};

const errorMsgStyle: React.CSSProperties = {
    color: "#03f",
    textAlign: "center",
    width: "100%"
};