Skip to content

Instantly share code, notes, and snippets.

View davo's full-sized avatar
🏠

Davo Galavotti davo

🏠
View GitHub Profile
@davo
davo / FrameSpy.tsx
Last active November 27, 2019 12:01
FrameSpy - Refactor
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
@davo
davo / Reset Touchbar.md
Last active July 18, 2019 04:16
Reset Touch or MacOS Mojave

pkill "Touch Bar agent";

killall "ControlStrip";

@davo
davo / Data.tsx
Created June 14, 2019 10:01
Framer X - Type Stack - Data Example
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 {

Recursively Remove .DS_Store

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

@davo
davo / beach-house-tour.md
Created June 12, 2019 15:00
Beach House
  • JUNE 14
    MANCHESTER, TN
  • AUG 1
    BURLINGTON, VT
  • AUG 3
    MONTREAL, CA
  • AUG 4
    NORTHAMPTON, MA
  • AUG 6
    CLEVELAND, OH
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) => {
@davo
davo / Colors.tsx
Created May 21, 2019 21:38
Reusing Framer X Shared Colors on a Function Component
import * as React from 'react'
import { Stack, Frame } from 'framer'
import { colors } from './canvas'
export function Colors() {
const [colorsTokens] = React.useState(() => {
return Object.keys(colors).map(key => colors[key])
})
return (
@davo
davo / observable.tsx
Created May 20, 2019 21:44
Observable book on Framer X
import * as React from 'react'
import { useState, useEffect, useRef } from 'react'
import { Frame, addPropertyControls, ControlType } from 'framer'
import { Runtime, Inspector } from '@observablehq/runtime'
import notebook from '@davo/bar-chart-race'
export function Observable({ tick }) {
const [tickDuration, setTickDuration] = useState(tick)
const animationRef = useRef()
@davo
davo / WindowResizeListener.tsx
Created May 17, 2019 22:32
Framer X WindowResizeListener
// https://framer.slack.com/archives/CB74N2FDY/p1557954143213500?thread_ts=1557952502.211200&cid=CB74N2FDY
import { Override, Data } from "framer"
import * as React from "react"
const initialSize = document.body.getBoundingClientRect()
const preview = Data({ width: initialSize.width, height: initialSize.height })
@davo
davo / regexs.md
Created May 14, 2019 15:18
Handy Regular Expressions

Capturing a class from a HTML / SVG element.

(class="([^"]*)")