nicksheffield’s gists

nicksheffield / HoverMarquee.js

Last active January 28, 2020 01:32

HoverMarquee react component

	import React, { useState, useRef, useEffect } from 'react'

	// found: https://stackoverflow.com/a/21015393
	function getTextWidth(text, font) {
	// re-use canvas object for better performance
	var canvas = getTextWidth.canvas \|\| (getTextWidth.canvas = document.createElement('canvas'))
	var context = canvas.getContext('2d')
	context.font = font
	var metrics = context.measureText(text)
	return metrics.width

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 / 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

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 / modal-example.html

Created June 19, 2019 23:33

scrollable modal example

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 / 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 / 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 / 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 / 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 & 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 {

Nick Sheffield nicksheffield