Davo Galavotti davo

State Management on Framer X with React

Here is a collection of implementation strategies to manage state on Framer X. Feel free to contribute your own strategies and ideas.

Examples marked with a checkmark mean that some examples has been provided on this repo.

pkill "Touch Bar agent";

killall "ControlStrip";

find . -name '.DS_Store' -type f -delete

	// WIP Refactored from https://github.com/aleksik/react-scratchcard/

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

	export function ScratchCard({ width, height, children, image: source, finishPercent }) {
	const [loaded, setLoaded] = React.useState(false)
	const [context, setContext] = React.useState(false)
	const [isDrawing, setIsDrawing] = React.useState(false)
	const [lastPoint, updateLastPoint] = React.useState(null)

	import * as React from 'react'
	import { addPropertyControls, ControlType, FrameProps, Frame } from 'framer'
	import reactElementToJSXString from 'react-element-to-jsx-string'
	import Highlight, { defaultProps } from 'prism-react-renderer'
	import { themes } from './themes'
	import Clipboard from 'react-clipboard.js'

	// @steveruizok

	// Define type of property

	import * as React from 'react'
	import styled from '@emotion/styled'
	import { css } from '@emotion/core'
	import { addPropertyControls, ControlType } from 'framer'

	type DataTypes = {
	format: 'data40' \| 'data30' \| 'data20' \| 'data10'
	}

	interface IDataTextProps {

	import * as React from "react"
	import { Frame, addPropertyControls, ControlType } from "framer"

	type Props = {
	width: number \| string
	height: number \| string
	color: string
	}

	export const SvgComponent = (props: Props) => {