Skip to content

Instantly share code, notes, and snippets.

View stramel's full-sized avatar

Michael Stramel stramel

View GitHub Profile
/**
* Checks if the specified Web Storage API exists and is accessible
* @param storage - Web Storage API
* @returns true, if the Web Storage API is accessible
*/
const isStorageEnabled = (storage?: Storage): storage is Storage => {
if (!storage) return false;
try {
const key = `__storage__test`;
storage.setItem(key, '');
@stramel
stramel / createFieldArray.ts
Created March 31, 2020 21:54
Field Array store and hook factory
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 March 31, 2020 17:19
Creates an array field on your form
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 May 5, 2022 07:27
NX Next.js Custom Server
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 June 13, 2019 06:43
Playing around with creating an object from a path string for react-hook-form
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',
<!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 February 15, 2019 02:34
[WIP] ShadyStyle
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 March 18, 2019 16:10
[WIP] IntersectionObserver element
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' });
@stramel
stramel / index.html
Created January 22, 2019 17:54 — forked from TimothyGu/index.html
for-of loop vs forEach (https://jsbench.github.io/#cec5fd6009b622c72311e8f447e101be) #jsbench #jsperf
<!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 February 12, 2019 04:04
(WIP) Ideal Image (Maybe Video) Component

Ideal Image Component

Features