davo

• JUNE 14
  MANCHESTER, TN
• AUG 1
  BURLINGTON, VT
• AUG 3
  MONTREAL, CA
• AUG 4
  NORTHAMPTON, MA
• AUG 6
  CLEVELAND, OH

davo

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

Example of a streamgraph that can be divided into multiple area charts.

davo

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

// 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

Capturing a class from a HTML / SVG element.

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

davo

import * as React from 'react'
import { useState, useEffect } from 'react'
import { Frame, addPropertyControls, ControlType } from 'framer'
import styled, { css } from 'styled-components'

interface Props {
	padding?: number
	paddingLeft?: number
	color?: string
	listBackgroundColor?: string

davo

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

davo

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

import { AreaClosed, Line, Bar } from '@vx/shape'
import { appleStock } from '@vx/mock-data'
import { curveMonotoneX } from '@vx/curve'
import { LinearGradient } from '@vx/gradient'
// import { GridRows, GridColumns } from '@vx/grid'
import { scaleTime, scaleLinear } from '@vx/scale'
// import { withTooltip, Tooltip } from '@vx/tooltip'

davo

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

\b(use)\w+

Try it

• Basic Hooks
  • useState
  • useEffect
• useContext