Skip to content

Instantly share code, notes, and snippets.

Jared Palmer jaredpalmer

Block or report user

Report or block jaredpalmer

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile

Pre-rendering virtual rows

Example list with ten total rows and a viewport large enough to display two rows.


█ - Visible row ▓ - Hidden/display-locked row ░ - Empty space (nothing rendered here)

View instyle.js
* @flow
opaque type Ruleset = { [string]: string | number };
type CreateInput = {
[styleName: string]: CSSProperties
vincentriemer / VideoProgressSlider.js
Created Jul 21, 2019
The current (WIP) implementation of chonkit's video progress slider.
View VideoProgressSlider.js
* @flow
import VisuallyHidden from "@reach/visually-hidden";
import instyle from "instyle";
import * as React from "react";
import { Focus } from "react-events/focus";
import { Drag } from "react-events/drag";
import { Press } from "react-events/press";
View vdom.js
function h (tagName, attributes = {}, children = []) {
return {
function diffAttrs (element, attributes) {
const newAttrs = Object.keys(attributes);
kitze / auto-updates.js
Created Mar 23, 2019
electron auto update
View auto-updates.js
// Packages
const { app, dialog, autoUpdater } = require('electron');
const ms = require('ms');
const isDev = require('electron-is-dev');
const logger = require('electron-timber');
const notify = require('./notify');
const got = require('got');
// Utilities
const { version: packageJsonVersion } = require('../package');
View animation.js
animated.DialogOverlay = animated(DialogOverlay)
animated.DialogContent = animated(DialogContent)
function NewPostDialog({ date, show, onDismiss }) {
const rootRef = useRef(null)
const transitions = useTransition(show, null, {
from: { opacity: 0, y: -10, blur: 0 },
enter: { opacity: 1, y: 0, blur: 8 },
leave: { opacity: 0, y: -10, blur: 0 },
gaearon /
Last active Oct 13, 2019
useLayoutEffect and server rendering

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {
View animated-bar.example.jsx
import React, {
} from "react";
import "../styles.css";
import { Tabs, TabList, Tab, TabPanels, TabPanel } from "../src";
import { useRect } from "../../rect/src";
vincentriemer / iphone-frame-overlay-app.js
Created Jan 20, 2019
Video iPhone Frame Overlay Web App Prototype
View iphone-frame-overlay-app.js
import React, { Component, useCallback, useState, useRef } from "react";
import "./App.css";
const imgUrl = require("./assets/iPhone-XS-Portrait-Space-Gray.png");
const fullSize = {
width: 1325,
height: 2616
bvaughn /
Last active Oct 4, 2019
Interaction tracing with React

Interaction tracing with React

React recently introduced an experimental profiler API. After discussing this API with several teams at Facebook, one common piece of feedback was that the performance information would be more useful if it could be associated with the events that caused the application to render (e.g. button click, XHR response). Tracing these events (or "interactions") would enable more powerful tooling to be built around the timing information, capable of answering questions like "What caused this really slow commit?" or "How long does it typically take for this interaction to update the DOM?".

With version 16.4.3, React added experimental support for this tracing by way of a new NPM package, scheduler. However the public API for this package is not yet finalized and will likely change with upcoming minor releases, so it should be used with caution.

This Gist provides some high-level docum

You can’t perform that action at this time.