Skip to content

Instantly share code, notes, and snippets.

Michael Stramel stramel

View GitHub Profile
@stramel
stramel / createFieldArray.ts
Created Mar 31, 2020
Field Array store and hook factory
View createFieldArray.ts
import { createContext, createElement, useContext, useEffect, useMemo, useState, ReactNode } from 'react'
import { useFormContext } from 'react-hook-form'
function createFieldArray<T>(name: string) {
const storeContext = createContext()
function StoreProvider({children, defaultValue}: {children: ReactNode, defaultValue: T[]}) {
const { register, setValue, unregister } = useFormContext()
const [items, setItems] = useState<T[]>(defaultValue)
@stramel
stramel / useArrayField.ts
Created Mar 31, 2020
Creates an array field on your form
View useArrayField.ts
import { useEffect, useState } from 'react'
import { useFormContext } from 'react-hook-form'
export default function useArrayField<T>({ name, defaultValue = [] }: { name: string; defaultValue?: T[] }) {
const { register, setValue, unregister } = useFormContext()
const [items, setItems] = useState<T[]>(defaultValue)
// Manually register our array field
useEffect(() => {
register({ name })
@stramel
stramel / server.js
Last active Jul 15, 2020
NX Next.js Custom Server
View server.js
const express = require('express')
module.exports = async function customServer(app, settings, proxyConfig) {
const handle = app.getRequestHandler()
await app.prepare()
const server = express()
if (proxyConfig) {
const proxyMiddleware = require('http-proxy-middleware')
Object.keys(proxyConfig).forEach(context => {
@stramel
stramel / object-from-path.js
Created Jun 13, 2019
Playing around with creating an object from a path string for react-hook-form
View object-from-path.js
const values = {
'property': 'foo',
'categories[1]': 'action',
'categories[0]': 'adventure',
'debug.works': 'true',
'person[0].active': 'true',
'person[0].name.first': 'testFirst',
'person[0].name.last': 'testLast',
'person[0].numbers[0]': '1234',
'person[0].numbers[1]': '5678',
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Untitled benchmark</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@stramel
stramel / shady-style.js
Last active Feb 15, 2019
[WIP] ShadyStyle
View shady-style.js
import "@webcomponents/shadycss/custom-style-interface.min.js";
const { CustomStyleInterface } = window.ShadyCSS;
class ShadyStyle extends HTMLElement {
__style = null;
constructor() {
super();
@stramel
stramel / intersectionObserver.js
Last active Mar 18, 2019
[WIP] IntersectionObserver element
View intersectionObserver.js
class MyIntersectionObserver extends HTMLElement {
constructor() {
super();
this._observer = null;
this._visited = false;
this._root = null;
this._rootMargin = '0px';
this._threshold = 0;
this._shadowRoot = this.attachShadow({ mode: 'open' });
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>for-of loop vs forEach</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@stramel
stramel / Features.md
Last active Feb 12, 2019
(WIP) Ideal Image (Maybe Video) Component
View Features.md

Ideal Image Component

Features

@stramel
stramel / index.html
Created Jan 2, 2019 — forked from jridgewell/index.html
Text data vs nodeValue #jsbench #jsperf (http://jsbench.github.io/#b266690cc58d684e9f9eb7de3158437e) #jsbench #jsperf
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Text data vs nodeValue #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
You can’t perform that action at this time.