Skip to content

Instantly share code, notes, and snippets.

View Cornally's full-sized avatar

Chris Cornally

4 followers · 3 following
View GitHub Profile
@Cornally
Cornally / useDebouncedInput.ts
Created July 27, 2023 13:52
Chat GPT Debounced Hook Example
import React, { useState, useEffect, ChangeEvent } from 'react';
type DebouncedInputHookProps = {
delay: number;
callback: (value: string) => void;
};
type DebouncedInputHookResult = {
debouncedValue: string;
handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
@Cornally
Cornally / responsive-utils.js
Created March 11, 2021 17:01
Utils for generating responsive styles
// import { createUseStyles } from 'react-jss'
export const breakpoints = {
'xs': 480,
'sm': 720,
'md': 1280,
'lg': 1440,
'xl': 1920
}
@Cornally
Cornally / .babelrc
Last active February 23, 2021 18:42
CRA Settings 2020 (CRA overrides, webpack, babel, editorconfig, and eslint config) — I use the following settings for aliasing imports in webpack, optional chaining in babel, preferred eslint formatting and linting on save. Enjoy!
// `/.babelrc`
{
"plugins": ["@babel/plugin-proposal-optional-chaining"]
}
@Cornally
Cornally / 1. scroll-restortation.component.js
Last active August 18, 2020 13:40
React + React Router 5.x component for handling scroll restoration during forward/back history traversal. Use alongside your <Router> instance. This component should be accompanied by a routing strategy that defines when scroll restoration should be sidestepped by way of setting the component's `active` prop to `false`.
import { useEffect } from 'react'
import PropTypes from 'prop-types'
import { useHistory } from "react-router-dom"
/**
* If the user navigates by way of anything but the back button, scroll to the top.
* Otherwise, retrieve the previous scroll position when back is pressed, if a value
* has been previously stored.
* @param {String} key Internal react-router key provided by history listener
@Cornally
Cornally / VueJS TV-accessible key mapping strategy
Last active August 18, 2020 13:24
The following outlines an approach I've used for tackling navigation in web-based Smart TV applications. Some assembly required.
// Inside each componenent, I defined navigation targets inline on the respective `<template>` elements:
<input
v-bind:value="value"
type="text"
rel="search-input"
:key-navigation-selectable="JSON.stringify(setSearchTargets())"
/>
// Potential targets are mapped out in a method below:
setSearchTargets: function(idx) {
@Cornally
Cornally / 1. icon.component.js
Last active June 23, 2021 21:36
ReactJS — Ultimate SVG Icon Workflow. The following will guide you through an SVG icon workflow I've refined for easing the use of icons in small to large React applications. The end result is a tidy component that works in your React 16.8+ application and Storybook 6.
// React icon component
import React, { useMemo } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import Actions from '~images/icons/actions.inline.svg'
import ArrowUp from '~images/icons/arrow-up.inline.svg'
import ArrowRight from '~images/icons/arrow-right.inline.svg'
import Beaker from '~images/icons/beaker.inline.svg'
import Comment from '~images/icons/comment.inline.svg'
@Cornally
Cornally / prod_audify_gateway_opengraph_processor
Last active June 23, 2021 21:36
OpenGraph Lambda Processor — Return custom opengraph responses for your SPA with this lambda function that fetches data for a specific record.
"use strict";
const https = require("https");
// These UAs receive the special page for OpenGraph
const opengraphUAs = [
'facebookexternalhit/1.1',
'Twitterbot',
'Googlebot',
'Slack',