Skip to content

Instantly share code, notes, and snippets.

Avatar
🦄
Hai!

Q ItsJonQ

🦄
Hai!
View GitHub Profile
@ItsJonQ
ItsJonQ / useCollapsibleHeightAnimation.js
Created Mar 2, 2021
React Spring: Height auto collapse/expand animations
View useCollapsibleHeightAnimation.js
import { useReducedMotion } from '@wp-g2/styles';
import React from 'react';
import { animated, useSpring } from 'react-spring';
function useCollapsibleHeightAnimation({ duration = 120, isVisible = false }) {
const contentRef = React.useRef();
const previouslyVisible = React.useRef(isVisible);
const [reducedMotion] = useReducedMotion();
const [animatedHeight, set] = useSpring(() => ({
View hstack-vstack-example.js
<View css={{ margin: 'auto', maxWidth: 960 }}>
<VStack>
<HStack justify="space-between">
<View>
<Heading size={3}>
Components: HStack, VStack, ZStack{' '}
<View as="span" css={{ fontSize: 'inherit', opacity: 0.5 }}>
#22
</View>
</Heading>
@ItsJonQ
ItsJonQ / interpolate.js
Last active Aug 19, 2020
interpolate.js
View interpolate.js
/**
* Modified from:
* https://github.com/react-spring/react-spring/blob/master/src/animated/createInterpolator.ts
*/
function clamp(value, min, max) {
return Math.max(min, Math.min(max, value));
}
export function findRange(input, inputRange) {
@ItsJonQ
ItsJonQ / use-controlled-state.js
Last active Mar 20, 2020
react-use-controlled-state.js
View use-controlled-state.js
import { useState, useEffect, useRef } from "react";
export function useControlledState(initialState) {
const [state, setState] = useState(initialState);
const stateRef = useRef(initialState);
useEffect(() => {
if (initialState !== stateRef.current) {
setState(initialState);
stateRef.current = initialState;
View keybase.md

Keybase proof

I hereby claim:

  • I am itsjonq on github.
  • I am itsjonq (https://keybase.io/itsjonq) on keybase.
  • I have a public key ASB0svRnRcuz0nmoHAUZQVPC1C7WDkUmBjSnZDbWJDF_rwo

To claim this, I am signing this object:

View react-time-slicing-clock.js
// Source
// https://github.com/facebook/react/blob/master/fixtures/unstable-async/time-slicing/src/Clock.js
import React, {createRef, PureComponent} from 'react';
const SPEED = 0.003 / Math.PI;
const FRAMES = 10;
export default class Clock extends PureComponent {
faceRef = createRef();
@ItsJonQ
ItsJonQ / createUniqueIDFactory.js
Last active Dec 3, 2018
Creates a unique incrementing ID with a prefix
View createUniqueIDFactory.js
export function createUniqueIDFactory(prefix) {
let index = 1
return `${prefix}${index++}`
}
@ItsJonQ
ItsJonQ / get.js
Last active Dec 1, 2018
A tiny implementation of lodash.get
View get.js
/**
* Retrieves a (deeply) nested value from an object.
* A tiny implementation of lodash.get.
*
* Tests:
* https://codesandbox.io/s/48052km1q7
*
* Perf tests:
* https://jsperf.com/get-try-catch-vs-reduce-vs-lodash-get
*
@ItsJonQ
ItsJonQ / install.sh
Created Aug 31, 2016 — forked from JeffreyWay/install.sh
Super-fast LAMP + 5.5 install script.
View install.sh
sudo apt-get update
sudo debconf-set-selections <<< 'mysql-server mysql-server/root_password password root'
sudo debconf-set-selections <<< 'mysql-server mysql-server/root_password_again password root'
sudo apt-get install -y vim curl python-software-properties
sudo add-apt-repository -y ppa:ondrej/php5
sudo apt-get update
sudo apt-get install -y php5 apache2 libapache2-mod-php5 php5-curl php5-gd php5-mcrypt php5-readline mysql-server-5.5 php5-mysql git-core php5-xdebug
@ItsJonQ
ItsJonQ / Vagrantfile
Created Aug 31, 2016 — forked from JeffreyWay/Vagrantfile
Quickie vagrantfile
View Vagrantfile
# -*- mode: ruby -*-
# vi: set ft=ruby :
# Vagrantfile API/syntax version. Don't touch unless you know what you're doing!
VAGRANTFILE_API_VERSION = "2"
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
config.vm.box = "precise64"
config.vm.box_url = "http://files.vagrantup.com/precise64.box"
config.vm.network :private_network, ip: "192.168.33.21"