Skip to content

Instantly share code, notes, and snippets.

Avatar

Joshua Comeau joshwcomeau

View GitHub Profile
View use-change-log.hook.js
/**
`useChangeLog` - dev-mode helper hook to let you
know why a memoized component re-rendered!
Usage example:
const YourComponent = React.memo((props) => {
// Just drop this fella into your memo component's body.
useChangeLog(props);
View FitText.js
// @flow
// Reimplementation of the jQuery plugin "FitText"
// https://github.com/davatron5000/FitText.js/blob/master/jquery.fittext.js
import React, { PureComponent } from 'react';
type Props = {
compressor: number,
children: React$Node,
};
View dream-reducer-constructor-api.js
const casetteStatusReducer = constructReducer('idle', () => ({
[VIEW_CASETTES]: 'selecting',
[EJECT_CASETTE]: 'idle',
[HIDE_CASETTES]: 'idle',
[SELECT_CASETTE]: 'loaded',
}));
const selectedReducer = constructReducer(null, (state, action) => ({
[SELECT_CASETTE]: action.id,
}));
@joshwcomeau
joshwcomeau / construct-reducer.js
Last active Aug 11, 2016
Disappointing Ducks
View construct-reducer.js
const noop = function noop() {};
export default function constructReducer(initialState, caseCreator = noop) {
// Because this function creates a reducer, it needs to return a reducer.
return (state = initialState, action) => {
// caseCreator is a function that returns an object, representing all
// of our former cases in the switch statement. It's a function so that
// the cases have access to the state and the action.
const cases = caseCreator(state, action);
View refactored-reducer.js
function statusReducer(state = 'idle', action) {
switch (action.type) {
case VIEW_CASETTES:
return 'selecting';
case EJECT_CASETTE:
case HIDE_CASETTES:
return 'idle';
case SELECT_CASETTE:
return 'loaded';
default:
View original-reducer.js
const initialState = {
casettes: {},
selectedCasette: null,
casetteStatus: 'idle', // One of 'idle', 'selecting', 'loaded'
casettePageNumber: 0,
casettePageLimit: 3,
};
export default function reducer(state = initialState, action) {
switch (action.type) {
View snail-rotate-cc.js
const flipMatrix = matrix => (
matrix[0].map((column, index) => (
matrix.map(row => row[index])
))
);
const rotateMatrixCounterClockwise = matrix => (
flipMatrix(matrix).reverse()
);
View snail-functional-refactor.js
const compose = (a, b) => x => a(b(x));
const reverse = array => [...array].reverse();
// `get` is a simple accessor function, used for selecting an item in an array.
const get = id => array => array[id];
// This functional version of map accepts our function first.
const map = (fn, array) => array.map(fn);
// `pluck` allows us to map through a matrix, gathering all the items at a
View snail-reverse-function.js
const reverse = array => [...array].reverse();
const compose = (a, b) => x => a(b(x));
const flipMatrix = matrix => (
matrix[0].map((column, index) => (
matrix.map(row => row[index])
))
);
const rotateMatrix = compose(flipMatrix, reverse);
View snail-4-permutations.js
const flipMatrix = matrix => (
matrix[0].map((column, index) => (
matrix.map(row => row[index])
))
);
const rotateMatrix = matrix => (
flipMatrix(matrix.reverse())
);
You can’t perform that action at this time.