davo

import React, { Component } from 'react'
import { Route, withRouter } from 'react-router-dom'
const isModifiedEvent = event => !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
type LinkContainerProps = {
	history: {
		push: (...args: any[]) => any,
		replace: (...args: any[]) => any,
		createHref: (...args: any[]) => any
	},
	location?: object,

davo

Regular expression to search for React Hooks functions on React libraries.

\b(use)\w+

Try it

• Basic Hooks
  • useState
  • useEffect
• useContext

davo

{
	"cardData": {
		"indica": [{
				"brandName": "Paris OG",
				"title": "Louis XIII OG",
				"subtitle": "4.9",
				"image": "https://images.weedmaps.com/products/000/019/694/avatar/original/1525137648-Louis_XIII_OG.jpg"
			},
			{
				"brandName": "Kush Rush Exotics",

davo

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

davo

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 {

davo

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

davo

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

davo

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

davo

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) => {

davo

Framer X

Designer/Developer Experience Pain Points

Code Components

• 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).