Skip to content

Instantly share code, notes, and snippets.

working hard to make the world better with software

Kent C. Dodds kentcdodds

working hard to make the world better with software
View GitHub Profile
kentcdodds / control-props.js
Created Apr 2, 2019
An implementation of control props with hooks
View control-props.js
// control props
import React from 'react'
import _ from 'lodash'
import {Switch} from '../switch'
const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args))
const noop = () => {}
function toggleReducer(state, {type, initialState}) {
kates /
Last active Aug 31, 2019
bulk search and replace with the silver searcher, awk, sed and xargs
ag "sometext" --nogroup | awk '{print substr($1,1,index($1,":")-1);}' | xargs -I {} sed -i .bak -e 's/sometext/anothertext/g' {}
kentcdodds / index.js
Created Sep 10, 2019
NodeJS file runner for Jest (create-node-runner using create-jest-runner). Use this with the runner option in jest config.
View index.js
const {createJestRunner} = require('create-jest-runner')
module.exports = createJestRunner(require.resolve('./node-runner'))
kentcdodds / create-reducer-context.js
Created May 8, 2019
Just some fun idea I had and don't want to lose.
View create-reducer-context.js
// src/count-context.js
import React from 'react'
function countReducer(count, action) {
const {step = 1} = action
switch (action.type) {
case 'INCREMENT': {
return count + step
default: {
kentcdodds / fix-feedback-links.js
Last active Dec 3, 2020
I use this to automatically fix links in my react workshops. (This one's only for the testing-react-apps repo because those markdown files aren't rendered in a UI, the normal one is at
View fix-feedback-links.js
iansu /
Last active Mar 1, 2021
Create React App 4.0 Alpha Testing

Create New App

JavaScript Template

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

TypeScript Template

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

kentcdodds /
Last active Mar 11, 2021
JavaScript Program Slicing with SliceJS

Route Module Pending Component Export

There are two primary approaches to page transitions (ignoring suspense's ditched attempt at a third)

  1. Indefinitely wait on the old screen
  2. Transition immediately to spinners/skeleton

Right now Remix has picked #1, but with a new export to a route module, we could support both.

Today, if you have this, Remix will wait for all data to load before displaying the page

kentcdodds / fix-links.js
Last active Apr 19, 2021
I use this to automatically fix links in my react workshops
View fix-links.js
View raw-text-example.js
* In our app, we have a few middleware that generate a string of HTML.
* On occassion it's fine to just use dangerouslySetInnerHTML directly for
* those, but that requires that you have a host node for the innerHTML.
* In certain scenarios (like tags in <head />), there's HTML that we need
* to insert directly where it is. This component enables that because
* we replace <raw-text> and </raw-text> with empty strings. Effectively
* making whatever's between <raw-text> and </raw-text> inlined in place.