Liam Chapman LiamChapman

React + Typescript Cheatsheet

If you use atom... download & install the following packages:

	export const cacheImages = async (srcArray) => {
	const promises = await srcArray.map((src) => {
	return new Promise((resolve, reject) => {
	const img = new Image();
	img.src = src;
	img.onload = resolve();
	img.onerror = reject();
	});
	});
	await Promise.all(promises);

	// Originally inspired by David Walsh (https://davidwalsh.name/javascript-debounce-function)

	// Returns a function, that, as long as it continues to be invoked, will not
	// be triggered. The function will be called after it stops being called for
	// `wait` milliseconds.
	const debounce = (func, wait) => {
	let timeout;

	return function executedFunction(...args) {
	const later = () => {

	// https://www.trysmudford.com/blog/linear-interpolation/
	// ^ fantastic guide from here!!

	const lerp = (x, y, a) => x * (1 - a) + y * a;
	const invlerp = (a, b, v) => clamp((v - a) / (b - a))
	const clamp = (v, min = 0, max = 1) => Math.min(max, Math.max(min, v));

	const items = [{
	scrollStart: 70, // Scroll tracking start point
	scrollEnd: 120, // Scroll tracking end point

	@mixin breakpoint($minWidth) {
	@media screen and (min-width: $minWidth) {
	@content;
	}
	}

	// @include breakpoint(650px) { width: 50%; }
	// etc..

	return(
	<select name="years" id="years">
	{ [...Array(40).keys()].map( (i, k) => i > 0 && <option key={ k } value={ i + 1 } selected={ parseInt(value, 10) === ( i + 1 ) }>{ i + 1 } years</option> ) }
	</select>
	);

	var myExports = require("my-library-dependency-i-want-to-see");
	console.log(Object.keys(myExports));

	// Polyfill
	if (typeof window !== 'undefined') {
	require('intersection-observer'); // eslint-disable-line global-require
	}
	// when elements intersect add css class
	export default ({
	elements,
	threshold,
	root = null,
	rootMargin = '0px',