Skip to content

Instantly share code, notes, and snippets.

View conor909's full-sized avatar

Conor McGrath conor909

View GitHub Profile
@conor909
conor909 / react-ts-forwardRef.tsx
Last active July 25, 2023 15:06
react TS forwardRef
import React, { forwardRef } from "react";
// Declare a type that works with generic components
type FixedForwardRef = <T, P = {}>(
render: (props: P, ref: React.Ref<T>) => React.ReactElement
) => (
props: P & React.RefAttributes<T>
) => React.ReactElement;
// Cast the old `forwardRef` to the new one
@conor909
conor909 / non-incremented-number.js
Created August 21, 2019 17:23
Find next non incremented number greater then 0
// find next non incremented number greater then 0
function solution(array) {
const sortedArray = array.sort((a, b) => (a - b));
const cleanArray = [...new Set(sortedArray)];
const N = cleanArray.reduce((total, value, i, arr) => {
if (value !== total + 1) {
const n = value + 1
return n > 0 ? n : 1
}
@conor909
conor909 / recursive-flatmap.js
Last active April 4, 2019 16:01
Dev test. A browser / production ready implementation of a flatten array function.
function flattenArray(array) {
var flattened = [];
function loop(array) {
for (var i=0; i < array.length; i++) {
var value = array[i];
if (typeof value === 'object' && value.constructor === Array) {
loop(value);
} else {
flattened.push(value);
}
@conor909
conor909 / web-component.js
Last active November 11, 2019 07:00
React app inside a web component
import React from 'react'
import { render as renderReact } from 'react-dom'
import retargetEvents from 'react-shadow-dom-retarget-events'
import App from './App'
(function() {
window.addEventListener('WebComponentsReady', () => {
class MyApp extends HTMLElement {
constructor() {
super()
@conor909
conor909 / orbs.js
Last active November 10, 2019 18:04
ES6 Classes & canvas
const canvas = document.getElementById("myCanvas");
canvas.width = width;
canvas.height = height;
class Scene {
constructor() {
this.orbs = [];
this.context = canvas.getContext("2d");
}
@conor909
conor909 / what-props-changed.js
Created March 27, 2019 17:20
Handy hook to find out what caused a rerender
import { useEffect, useRef } from 'react';
export default function whatChanged(props) {
const prev = useRef(props);
useEffect(() => {
const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
if (prev.current[k] !== v) {
ps[k] = [prev.current[k], v];
}
return ps;
@conor909
conor909 / declarativevimperative2.js
Created August 17, 2016 13:41
when returning booleans from a function based on the result of an if statement
const timeframeAffectsKpiData = (isInstantKpi, timeframe) => {
if (timeframe && isInstantKpi && !timeframeContainsToday(timeframe)) {
      return false;
  }
  return true;
};
//vs
const timeframeAffectsKpiData = (isInstantKpi, timeframe) => {
@conor909
conor909 / declarativevimperative.js
Last active August 17, 2016 13:39
declarative versus imperative
const minWidth = 220;
const minColumns = 1;
const maxColumns = 5;
const numberOfColumns = clamp(
this.props.containerWidth / minWidth,
minColumns,
maxColumns);
// vs
@conor909
conor909 / noDuplicateNamingPattern.js
Last active March 11, 2016 13:45
file-name (1), file-name (2)
const boxers = [ {name: "Muhammad Ali"}, {name: "Barry McGuigan"} ];
const boxer = boxers[0];
let clone = $.extend(true, {}, boxer);
let index = 1;
let isNameUnique = name => _(boxers)
.chain()
.map(dg => dg.name)
.all(n => n !== name)
.value();
background: linear-gradient(0deg, #0f0763, #000000);
background-size: 400% 400%;
-webkit-animation: AnimationName 16s ease infinite;
-moz-animation: AnimationName 16s ease infinite;
-o-animation: AnimationName 16s ease infinite;
animation: AnimationName 16s ease infinite;
@-webkit-keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:50% 100%}