Framer X RFC

GenericComponent.tsx

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

interface WithPropertyControls<P> extends React.SFC<P> {
	propertyControls?: PropertyControls
}

declare type RFC<P> = WithPropertyControls<P>

interface Props {
	text: string
}

const GenericComponent: RFC<Props> = (props: Props) => {
	return <h1 style={style}>{props.text}</h1>
}

GenericComponent.defaultProps = {
	text: 'Hello'
}

GenericComponent.propertyControls = {
	text: {
		type: ControlType.String,
		defaultValue: GenericComponent.defaultProps.text,
		title: '',
		placeholder: ''
	}
}

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'
}


export { GenericComponent }