Skip to content

Instantly share code, notes, and snippets.

View TimonVS's full-sized avatar

Timon van Spronsen TimonVS

114 followers · 237 following
View GitHub Profile
@kyleshevlin
kyleshevlin / memoizedHandlers.js
Created January 22, 2021 00:26
Using React.useMemo to create a `handlers` object
// One of my new favorite React Hook patternms is to create handler
// functions for a custom hook using `React.useMemo` instead of
// `React.useCallback`, like so:
function useBool(initialState = false) {
const [state, setState] = React.useState(initialState)
// Instead of individual React.useCallbacks gathered into an object
// Let's memoize the whole object. Then, we can destructure the
// methods we need in our consuming component.
@tannerlinsley
tannerlinsley / createCrudHooks.js
Created November 29, 2020 06:39
A naive, but efficient starter to generate crud hooks for React Query
export default function createCrudHooks({
baseKey,
indexFn,
singleFn,
createFn,
updateFn,
deleteFn,
}) {
const useIndex = (config) => useQuery([baseKey], indexFn, config)
const useSingle = (id, config) =>
@wilsonpage
wilsonpage / swr.ts
Last active March 28, 2025 09:35
An implementation of stale-while-revalidate for Cloudflare Workers
export const CACHE_STALE_AT_HEADER = 'x-edge-cache-stale-at';
export const CACHE_STATUS_HEADER = 'x-edge-cache-status';
export const CACHE_CONTROL_HEADER = 'Cache-Control';
export const CLIENT_CACHE_CONTROL_HEADER = 'x-client-cache-control';
export const ORIGIN_CACHE_CONTROL_HEADER = 'x-edge-origin-cache-control';
enum CacheStatus {
HIT = 'HIT',
MISS = 'MISS',
REVALIDATING = 'REVALIDATING',
@aleclarson
aleclarson / rollup-typescript.md
Last active August 1, 2025 13:38
The best Rollup config for TypeScript libraries

It's 2024. You should use tsup instead of this.

Features

🔥 Blazing fast builds
😇 CommonJS bundle
🌲 .mjs bundle
✨ .d.ts bundle + type-checking

@swalkinshaw
swalkinshaw / tutorial.md
Last active July 20, 2025 07:39
Designing a GraphQL API
@MoOx
MoOx / react-ui-kit-comparator.md
Last active April 16, 2020 20:36
Matrix of existing React ui kit (more than 200 download/week, more than 200 stars)
@dethi
dethi / unused-files.sh
Last active April 25, 2022 05:34
create-react-app: find files not used in the app bundle, i.e. unused source code
#!/bin/bash
# Launch inside a create-react-app project after building the production build.
# Require `jq`.
diff \
<(find src -type f \( -name '*.js' -o -name '*.jsx' -o -name '*.css' \) | sort) \
<(cat build/**/*.map | jq --raw-output '.sources | join("\n")' \
| grep -v '\.\./' | grep -E '\.(js|jsx|css)$' \
| sed "s#^#src/#" | sort | uniq) \
@kitze
kitze / store.js
Created January 24, 2018 13:14
simplified redux
import produce from 'immer';
import {createStore} from 'redux';
const handleActions = (actionsMap, defaultState) => (
state = defaultState,
{type, payload}
) =>
produce(state, draft => {
const action = actionsMap[type];
action && action(draft, payload);
@igorkulman
igorkulman / CompareTools.plist
Last active November 7, 2020 07:06
Visual Studio Code as a merge tool for Git Tower. Place both files to ~/Library/Application Support/com.fournova.Tower2/CompareTools/ and restart Git Tower
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
<dict>
<key>ApplicationIdentifier</key>
<string>com.microsoft.VSCode</string>
<key>ApplicationName</key>
<string>Visual Studio Code</string>
@jeongsd
jeongsd / RouteConst.js
Created July 21, 2017 22:10
react router constants
import pathToRegexp from 'path-to-regexp';
class RouteConst {
constructor(path, parent = null) {
this.path = parent ? `${parent.path}${path}` : path;
this.toURL = pathToRegexp.compile(this.path);
}
}