Skip to content

Instantly share code, notes, and snippets.

Avatar
🤓
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
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
kates / search_and_replace.sh
Last active Aug 31, 2019
bulk search and replace with the silver searcher, awk, sed and xargs
View search_and_replace.sh
ag "sometext" --nogroup | awk '{print substr($1,1,index($1,":")-1);}' | xargs -I {} sed -i .bak -e 's/sometext/anothertext/g' {}
@kentcdodds
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
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
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 https://gist.github.com/kentcdodds/436a77ff8977269e5fee39d9d89956de)
View fix-feedback-links.js
@iansu
iansu / README.md
Last active Mar 1, 2021
Create React App 4.0 Alpha Testing
View README.md

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
kentcdodds / README.md
Last active Mar 11, 2021
JavaScript Program Slicing with SliceJS
View README.md
View remix-pending-route-module-export.md

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
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.
*