Skip to content

Instantly share code, notes, and snippets.

@chrisirhc
chrisirhc / App.test.js
Last active November 12, 2022 14:04
Example using Profiler, keyboard events, and demonstrating effect of memoization. https://reactjs.org/docs/profiler.html
View App.test.js
import { Profiler, useState, useMemo } from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'
let msgs = [];
function pushMsg(id, phase, actualDuration, baseDuration, startTime, commitTime) {
msgs.push([id, phase])
}
function PushProfiler({id, children}) {
return (
@chrisirhc
chrisirhc / next-input.js
Created March 14, 2021 21:55
Next Tab Keystroke goes to next input
View next-input.js
function nextFocusInput(e) {
if (e.target.tagName == 'INPUT') {
return;
}
if (!e.relatedTarget || e.relatedTarget.tagName != 'INPUT') {
return;
}
e.preventDefault();
var allInputs = Array.from(document.querySelectorAll('input'));
allInputs[allInputs.indexOf(e.relatedTarget) + 1].focus();
@chrisirhc
chrisirhc / es-animation.js
Created May 25, 2020 21:47
First few lines of react-vis/es/animation.js
View es-animation.js
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; de
@chrisirhc
chrisirhc / es-animation.js
Created May 25, 2020 21:47
First few lines of react-vis/es/animation.js
View es-animation.js
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; de
@chrisirhc
chrisirhc / jsx-array.js
Created March 9, 2019 05:01
Convert jsx arrays
View jsx-array.js
'use strict';
module.exports = function(file, api, options) {
const j = api.jscodeshift;
const root = j(file.source);
const ReactUtils = require('./utils/ReactUtils')(j);
function makeSafe(node) {
if (node.type !== 'JSXElement') {
return j.jsxExpressionContainer(node);
@chrisirhc
chrisirhc / gifsicle.sh
Created February 14, 2019 20:54
Gifsicle command
View gifsicle.sh
gifsicle -O3 image13.gif -o image13-opt.gif --colors 64 --scale 0.5
@chrisirhc
chrisirhc / esnextbin.md
Last active December 3, 2016 05:53
esnextbin sketch
@chrisirhc
chrisirhc / containers.html
Last active January 31, 2016 09:42
CSS Technique: Block container demo code
View containers.html
<div class="box">
<span class="t box-inner">div + span</span>
</div>
@chrisirhc
chrisirhc / tooltip.es6.jsx
Created January 31, 2016 01:03
DOM diffing, DOM shape, and mouse events (First version)
View tooltip.es6.jsx
class HasTooltip extends React.Component {
/* … */
_renderPlaceholder() {
return (
<div className="has-tooltip"
onMouseEnter={this._setHovered}
onMouseLeave={this._setNotHovered}
></div>
);