Injecting a Custom React Component into Plasmic Studio: Custom Props UI for a Code Component

Plasmic Studio Questions
1

Hi everyone,

I’m trying to extend the built-in Reveal component (react-awesome-reveal) so that Plasmic Users can input custom keyframes. react-awesome-reveal supports this but I would like to make this available in Plasmic Studio and for the UI to edit these CSS properties to be as designer friendly as possible.

So far, I’ve created a wrapper component around <Reveal/> and I’m now thinking about how to expose the relevant props to Plasmic Studio.

Ideally, I would like to have something like the following UI that already exists in Plasmic Studio which is used to edit CSS transforms. The idea is to have one modal to set the from keyframe, and another modal to set the to keyframe.

image

Any ideas? How close can I get to this? Plasmic Studio is built with React + Ant Design after all, right?

Here’s my Reveal wrapper component for context:

import React from "react";
import { keyframes } from "@emotion/react";
import { Reveal, RevealProps } from "react-awesome-reveal";

type EasingFunction = CubicBezierTimingFunction | StepTimingFunction | "linear";
type CubicBezierTimingFunction =
	| "ease"
	| "ease-in"
	| "ease-in-out"
	| "ease-out"
	| (string & {});
type StepTimingFunction = "step-end" | "step-start" | (string & {});

interface CustomRevealProps extends RevealProps {
	// keyframes: Keyframes;
	children: React.ReactNode;
}

const CustomReveal = ({ children, ...rest }: CustomRevealProps) => {
	const skewStart = [10, 10];
	const skewEnd = [0, 0];
	const translateStart = ["-200px", "0", "0"];
	const translateEnd = ["0", "0", "0"];
	const rotateStart = ["45deg"];
	const rotateEnd = ["0deg"];
	const scaleStart = ["0.5"];
	const scaleEnd = ["1"];
	const easing: EasingFunction = "ease-in-out";

	const customAnimation = keyframes`
            from {
              transform: skew(${skewStart[0]}deg, ${skewEnd[1]}deg);
              translate: ${translateStart.join(" ")};
              rotate: ${rotateStart.join(" ")};
              scale: ${scaleStart.join(" ")};
              opacity: 0;
            }

            to {
              transform: skew(0deg, 0deg);
              translate: ${translateEnd.join(" ")};
              rotate: ${rotateEnd.join(" ")};
              scale: ${scaleEnd.join(" ")};
              opacity: 1;
            }
`;

return (
	<Reveal
		{...rest}
		keyframes={customAnimation}
		style={{
			animationTimingFunction: easing,
		}}
	>
		{children}
	</Reveal>
);
};

export default CustomReveal;
2

oh i found the answer in the docs:

I’ll try recreating the transform UI using ant-design

1 Like