FramerX component interaction

ClickTrigger.tsx

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { data } from "./Examples";

export class ClickTrigger extends React.Component<any> {
	static propertyControls: PropertyControls = {
		number: { type: ControlType.Number, defaultValue: 0 }
	};

	onClick = () => {
		console.log("click click");
		data.randomNumber = this.props.number;
	};

	render() {
		return <div onClick={this.onClick}>{this.props.children}</div>;
	}
}

Examples.tsx

import { Data, Override } from "framer";

export const data = Data({
	randomNumber: 0
});

export const randomizer: Override = () => ({
	text: data.randomNumber
});
 

NumberDisplay.tsx

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

const style: React.CSSProperties = {
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    textAlign: "center",
    color: "#8855FF",
    background: "rgba(136, 85, 255, 0.1)",
    overflow: "hidden",
};

// Define type of property
interface Props {
    text: string;
}

export class NumberDisplay extends React.Component<Props> {

    // Set default properties
    static defaultProps = {
    text: "Hello World!"
    }

    // Items shown in property panel
    static propertyControls: PropertyControls = {
    text: { type: ControlType.String, title: "Text" },
    }

    render() {
    return <div style={style}>{this.props.text}</div>;
    }
}