Skip to content

Instantly share code, notes, and snippets.

View nicksheffield's full-sized avatar

Nick Sheffield nicksheffield

16 followers · 1 following
View GitHub Profile
@nicksheffield
nicksheffield / flatten.js
Last active September 6, 2019 03:03
A function to flatten a combination of strings arrays and objects down into a single string. Used for handling conditional class names in react
export const styles = (arg) => {
if (typeof arg === 'string') return arg
if (arg instanceof Array) {
return arg
.reduce((acc, arg) => {
return [...acc, styles(arg)]
}, [])
.map((x) => x.trim())
.filter((x) => x)
@nicksheffield
nicksheffield / includer.js
Last active June 25, 2019 11:59
Produce a new object by diffing an original object containing data, and an similarly shaped object of booleans
const data = {
prop: 'red',
prop2: 'blue',
prop3: 'green',
prop4: 'black',
collection: [
{
id: 1,
txt: 'a'
},
@nicksheffield
nicksheffield / useOutsideClick.js
Created June 24, 2019 05:34
Handle clicks outside of an element. Useful for elements that display overlays like datepickers.
import { useEffect } from 'react'
const getPath = function(event) {
const path = []
let currentElem = event.target
while (currentElem) {
path.push(currentElem)
currentElem = currentElem.parentElement
}
if (path.indexOf(window) === -1 && path.indexOf(document) === -1) path.push(document)
@nicksheffield
nicksheffield / modal-example.html
Created June 19, 2019 23:33
scrollable modal example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@nicksheffield
nicksheffield / useWeakReducer.js
Created June 7, 2019 04:55
Like useReducer, but doesn't trigger component renders
import React, { useRef, useCallback } from 'react'
const useWeakReducer = (reducer, initialState) => {
const ref = useRef(initialState)
const dispatch = useCallback((action) => {
ref.current = reducer(ref.current, action)
}, [])
return [ref.current, dispatch]
@nicksheffield
nicksheffield / useWeakState.js
Last active June 7, 2019 04:48
Like useState, but doesn't trigger component re-render
import React, { useRef, useCallback } from 'react'
const useWeakState = (initialVal) => {
const ref = useRef(initialVal)
const set = useCallback((val) => {
if (typeof val === 'function') ref.current = val(ref.current)
else ref.current = val
}, [])
@nicksheffield
nicksheffield / hooktester.js
Created March 8, 2019 00:29
A quick method for testing hooks with react-testing-library
import React from 'react'
import { render } from 'react-testing-library'
export default hookfn => {
const Comp = ({ children, args }) => children(hookfn(...args))
const setup = (...args) => {
let output = {}
render(
@nicksheffield
nicksheffield / creepyface.js
Last active March 29, 2018 04:01
Facial Recognition + webcam + canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FACE</title>
<style>
video { display: none; }
#canvas2 { display: none; }
@nicksheffield
nicksheffield / film_and_40s_player.html
Created March 17, 2018 10:42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Film &amp; 40's player</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<style>
body {
@nicksheffield
nicksheffield / links.md
Last active May 15, 2018 21:52