LoadAPI.tsx

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

// Define type of properties
interface Props {
    usersAmount: number;
}

interface States {
    json: any;
}

const dataURL = "https://randomuser.me/api/?results=";

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

    state = {
        json: []
    };

    static propertyControls: PropertyControls<Props> = {
        usersAmount: {
            type: ControlType.Number,
            max: 15,
            min: 1,
            step: 1,
            title: "Amount"
        }
    };

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

    // We need this method for the very first time
    // when we drag`n`drop our component from the left panel
    componentDidMount() {
        this.fetchJSON(dataURL + this.props.usersAmount);
    }

    // Compare previous and current Prop. If they are different
    // we could make changes
    componentDidUpdate(prevProps, prevState) {
        if (prevProps.usersAmount !== this.props.usersAmount) {
            this.fetchJSON(dataURL + this.props.usersAmount);
        }
    }

    render() {
        return (
            <div style={wrapStyle}>
                {this.state.json.map((card, i) => (
                    <div style={cardStyle} key={`card-${i}`}>
                        <h2 style={headerStyle}>{card.name.first}</h2>
                        <p style={captionStyle}>{card.email}</p>
                        <div
                            style={{
                                ...imageStyle,
                                ...{backgroundImage: `url(${card.picture.large})`}
                            }}/>
                    </div>
                ))}
            </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%",
    minHeight: "120px",
    margin: "0 0 20px",
    borderRadius: "12px",
    background: "grey",
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-end",
    position: "relative",
    overflow: "hidden",
    backgroundColor: "#222"
};

const imageStyle: React.CSSProperties = {
    width: "110%",
    height: "112%",
    position: "absolute",
    top: "-10px",
    left: "-20px",
    opacity: 0.6,
    backgroundPosition: "center",
    backgroundSize: "cover",
    filter: "blur(4px)",
    zIndex: 1
};

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

const captionStyle: React.CSSProperties = {
    zIndex: 2,
    color: "white",
    opacity: 0.6,
    fontSize: "16px",
    fontWeight: 700,
    margin: 0
};