Davo Galavotti davo

Framer X

Classes as the only way to create Code Components to Framer X.
- ES6 Classes are awesome but hardly the only way to code reusable components in React. If I wanted to create a stateless functional component there is no way for Framer X to view or create an instance of such component inside the Components panel.
Examples on how to Extend a Framer X Class component (ie: PageComponent)
- This might be solved with a little documentation effort. I’m doing that to understand the relationship between the core components of Framer X and external community driven components (FX/React/JS).

	const isCanvasOrPreview = (source: any) => {
	const searchLoop: (node: any) => 'canvas' \| 'preview' = node => {
	if (!node) return 'canvas'
	if (node.key === 'preview') return 'preview'
	return searchLoop(node._debugOwner)
	}

	return searchLoop(source._reactInternalFiber)
	}

	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 {

	import React, { Component, useCallback, useState, useRef } from "react";
	import "./App.css";

	const imgUrl = require("./assets/iPhone-XS-Portrait-Space-Gray.png");

	const fullSize = {
	width: 1325,
	height: 2616
	};

	copy(
	Array.from(document.querySelectorAll('p')).map(p => {
	const t = p.innerText
	return {
	t
	}
	})
	)

	{
	"workbench.colorCustomizations": {
	"titleBar.activeBackground": "#05f",
	"titleBar.inactiveBackground": "#09f",
	"titleBar.inactiveForeground": "#262626",
	"titleBar.activeForeground": "#ffffff"
	}
	}

	import * as React from 'react'
	import { fonts } from './fonts'

	const fontNames = fontArray => {
	let fontList = []
	fontArray.forEach((elem, index) => fontList.push(elem.family))
	return fontList
	}

	const filterFontsByCategory = (category: string) => {