Skip to content

Instantly share code, notes, and snippets.

View jonastreub's full-sized avatar

Jonas Treub jonastreub

View GitHub Profile
@jonastreub
jonastreub / Switch.tsx
Last active April 2, 2019 06:25
iOS Switch component using new Framer API (beta)
import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
interface Props {
enabled: boolean
onChange: (enabled: boolean) => void
tint?: string
}
export function Switch({ enabled, tint, onChange }: Props) {
@jonastreub
jonastreub / Store.ts
Last active April 1, 2024 10:11
Share state between Framer components using a Store
import * as React from "react"
// For sharing a search string among components
// export const searchStore = new Store("");
// Register class components on mount
// componentDidMount() { searchStore.registerComponent(this) }
// And unregister on unmount
// componentWillUnmount() { searchStore.unregisterComponent(this) }
@jonastreub
jonastreub / useToken.ts
Last active April 2, 2019 15:40
Share values among components using a hook
import * as React from "react"
// Share values among components using a hook. The values are available using an identifier.
// There are currently three types of build-in tokens:
// - useNumberToken
// - useStringToken
// - useBooleanToken
// - useObjectToken
// - useArrayToken
@jonastreub
jonastreub / usePositionTransition.ts
Created May 11, 2019 16:49
Allow div elements to transition relative position changes.
import { useRef, useLayoutEffect, RefObject } from "react"
interface PositionTransitionOptions extends Partial<TransitionOptions> {
/** A list of {@link Dependencies} for the position of the element. This could for example be the index in a list, the window size or a combination of those. When the dependencies change a transition can happen. */
dependencies: Dependencies
/** The element ref can be passed in if you don't want to use the ref returned by the hook. */
ref?: RefObject<HTMLDivElement>
}
interface PositionInfo {
@jonastreub
jonastreub / useGyro.ts
Created May 12, 2019 12:13
A hook making it fun to work with the gyroscope
import { useState, useEffect } from "react"
interface WorldOrientation {
/** A number representing the motion of the device around the z axis, expressed in degrees with values ranging from 0 to 360. */
alpha: number
/** A number representing the motion of the device around the x axis, expressed in degrees with values ranging from -180 to 180. This represents a front to back motion of the device. */
beta: number
/** A number representing the motion of the device around the y axis, expressed in degrees with values ranging from -90 to 90. This represents a left to right motion of the device. */
gamma: number
}