Skip to content

Instantly share code, notes, and snippets.

Michael Stramel stramel

Block or report user

Report or block stramel

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
@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 Feb 20, 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.