Skip to content

Instantly share code, notes, and snippets.

View click2install's full-sized avatar
:octocat:
Clicking, double clicking, sending email, receiving email ... I could go on.

click2install click2install

:octocat:
Clicking, double clicking, sending email, receiving email ... I could go on.
View GitHub Profile
@click2install
click2install / DateTime.ts
Created November 21, 2021 08:07
[DateTime] - A GraphQL ScalarType for Luxon DateTime
import type { GraphQLScalarTypeConfig } from "graphql";
import { GraphQLScalarType } from "graphql";
import { DateTimeResolver } from "graphql-scalars";
import { DateTime } from "luxon";
export const GraphQLDateTimeConfig: GraphQLScalarTypeConfig<DateTime, DateTime> =
{
name: "DateTime",
description: "An ISO8601 date-time string represented by a Luxon DateTime instance.",
@click2install
click2install / useResizeObserver.ts
Last active August 28, 2021 11:30
[useResizeObserver] - A React hook for observing any element resize.
import { RefObject, useEffect, useState } from "react";
import ResizeObserver from "resize-observer-polyfill";
type BoundingRect = Omit<DOMRectReadOnly, "toJSON">;
export function useResizeObserver<T extends HTMLElement>(target: RefObject<T>)
{
const [state, setState] = useState<BoundingRect>({ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0 });
@click2install
click2install / i18nKeysGenerator.js
Last active August 12, 2021 08:28
[i18nKeyGenerator] - Build utility for generating a typed object for typed access to i18n keys.
// util to code generate an object from another object where all the resulting object
// keys equal their respective paths within the object.
//
// useful for removing magic i18n strings from code.
/* eslint-disable @typescript-eslint/no-var-requires */
const dot = require("dot-object");
const fs = require("fs");
const path = require("path");
@click2install
click2install / Guid.test.ts
Last active August 12, 2021 08:29
[Guid] - Typescript Guid with a similar API to a C# Guid struct
import { expect } from "chai";
import { describe, it } from "mocha";
import * as faker from "faker";
import { Guid, GuidFormat } from "../Guid";
describe(nameof(Guid), () =>
{
const empty = "00000000-0000-0000-0000-000000000000";
@click2install
click2install / HttpStatus.ts
Last active August 12, 2021 08:41
[HttpStatus] - A TypeScript HTTP status code enumeration
export enum HttpStatus
{
Continue = 100,
SwitchingProtocols = 101,
Processing = 102,
EarlyHints = 103,
OK = 200,
Created = 201,
Accepted = 202,
@click2install
click2install / usage.ts
Last active August 12, 2021 08:33
[useLogStateChanges] - A React hook to log state changes within a functional component or hook.
// using ts-nameof
useLogStateChanges(nameof(SomeComponent),
[
[nameof(value), value],
[nameof(startDate), startDate, val => (val as Date).valueOf().toString()],
[nameof(endDate), endDate]
]);
// using strings :(
useLogStateChanges("SomeComponent",
@click2install
click2install / App.js
Last active August 12, 2021 08:36
[Avatar] - A React avatar component for autogenrating avatar based on a given name.
import React from "react";
import { Avatar } from "./Avatar";
export default function App()
{
return (
<div className="App">
<Avatar name="display middle name" background="#1FDA8A" size={32} highContrast={false} rounded={false} bold={true} />
</div>
@click2install
click2install / ThemeProvider.tsx
Last active August 12, 2021 08:34
[ThemeProvider] - A FluentUI React theme context provider.
import { AzureCustomizationsLight, AzureCustomizationsDark } from "@uifabric/azure-themes";
import { ThemeProvider as FluentThemeProvider } from "@fluentui/react-theme-provider";
import React, { createContext, PropsWithChildren, useContext, useState } from "react";
import { useLocalStorage } from "../hooks/useLocalStorage";
interface IThemeContext
{
themeName: string;
@click2install
click2install / useFadeOut.js
Last active August 12, 2021 08:25
[useFadeOut] - ReactJS hook to fadeOut an element using the opacity and display styles.
import {useLayoutEffect, useRef} from "react";
export default function useFadeOut(ref, fadeTime, visible)
{
const timerId = useRef();
useLayoutEffect(() =>
{
clearTimeout(timerId.current);
@click2install
click2install / DebugRouter.js
Created July 22, 2019 14:01
React DebugRouter
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from 'components/Login'
import DefaultComponent from 'components/DefaultComponent'
class DebugRouter extends Router {
constructor(props){
super(props);
console.log('initial history is: ', JSON.stringify(this.history, null,2))
this.history.listen((location, action)=>{