Framer X — Property Controls

property.js

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

// Define type of property
export interface Props {
	text: string,
	color: string,
	boolean: boolean,
	numberA: number,
	numberB: number,
	image: string,
	file: string,
	enum: 'A' | 'B' | 'C',
	segment: string,
	fused: number,
	fusedPerSide: boolean,
	fusedTop: number,
	fusedRight: number,
	fusedBottom: number,
	fusedLeft: number,
	width: number,
	height: number,
}

export class Props extends React.Component<Props> {
	// Set default properties
	static defaultProps = {
		text: 'Framer X',
		color: '#05F',
		boolean: true,
		numberA: 0,
		numberB: 0,
		image: '',
		file: '',
		enum: 'A',
		segment: 'A',
		fused: 0,
		fusedPerSide: false,
		fusedTop: 0,
		fusedRight: 0,
		fusedBottom: 0,
		fusedLeft: 0,
		width: 500,
		height: 500,
	}

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

		// Colour
		color: {
			type: ControlType.Color,
			title: 'Color',
		},

		// Image
		image: { type: ControlType.Image, title: 'Image' },

		// Number slider
		numberA: {
			type: ControlType.Number,
			title: 'Number A',
			min: 0,
			max: 100,
			step: 1,
		},

		// Number step
		numberB: {
			type: ControlType.Number,
			title: 'Number B',
			min: 0,
			max: 100,
			step: 1,
			displayStepper: true,
		},

		// Fused values T R B L
		fused: {
			type: ControlType.FusedNumber,
			toggleKey: 'fusedPerSide',
			toggleTitles: [ 'All Sides', 'Per Side' ],
			valueKeys: [ 'fusedTop', 'fusedRight', 'fusedBottom', 'fusedLeft' ],
			valueLabels: [ 'T', 'R', 'B', 'L' ],
			min: 0,
			title: 'Fused',
		},

		// Boolean
		boolean: {
			type: ControlType.Boolean,
			title: 'Boolean',
			enabledTitle: 'True',
			disabledTitle: 'False',
		},

		// Segment [ A | B | C ]
		segment: {
			type: ControlType.SegmentedEnum,
			options: [ 'A', 'B', 'C' ],
			optionTitles: [ 'A', 'B', 'C' ],
			title: 'Segment',
		},

		// Dropdown
		enum: {
			type: ControlType.Enum,
			options: [ 'A', 'B', 'C' ],
			optionTitles: [ 'Option A', 'Option B', 'Option C' ],
			title: 'Enum',
		},

		// File
		file: {
			type: ControlType.File,
			allowedFileTypes: [ 'png', 'jpg' ],
			title: 'File',
		},
	}
}