Skip to content

Instantly share code, notes, and snippets.

@silicakes
Created December 31, 2018 18:19
Show Gist options
  • Save silicakes/0becf9aa8c6a73d7f1cc0f8bc51ca83f to your computer and use it in GitHub Desktop.
Save silicakes/0becf9aa8c6a73d7f1cc0f8bc51ca83f to your computer and use it in GitHub Desktop.
import * as React from "react";
import { PropertyControls, ControlType, Override } from "framer";
import { data } from "./Examples";
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;
color: string;
}
export class ComponentA 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" },
color: { type: ControlType.String, title: "Color" }
};
componentDidUpdate(prevProps: Props) {
const { color } = this.props;
console.log("la la", color)
data.color = color;
Object.assign(data, color)
console.log(data);
}
render() {
return <div style={style}>{this.props.text}</div>;
}
}
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 {
color: string;
text: string;
}
export class ComponentB extends React.Component<Props> {
// Set default properties
static defaultProps = {
color: "",
text: ""
};
// Items shown in property panel
static propertyControls: PropertyControls = {
color: { type: ControlType.String, title: "Color" },
text: { type: ControlType.String, title: "Text" }
};
render() {
const { color } = this.props;
return <div style={{ ...style, color }}>{this.props.text}</div>;
}
}
import { Data, animate, Override, Animatable } from "framer"
export const data = Data({ toggle: true, scale: Animatable(1), opacity: Animatable(1), rotation: Animatable(0), rotationY: Animatable(0) , color: ""})
export const colorOverride: Override = () => ({
color: data.color,
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment