Skip to content

Instantly share code, notes, and snippets.

View btoo's full-sized avatar
🅱️
2️⃣

btoo

🅱️
2️⃣
View GitHub Profile
@btoo
btoo / effect-react-component-di.ts
Created April 30, 2024 17:40
effect-ts react component dependency injection demo
import { Context, Effect } from "effect";
import { jest } from '@jest/globals';
import React, { useEffect, useState } from "react";
interface Ad {
id: string
trackingEvent: string
}
export class FireTrackingEvent extends Context.Tag("FireTrackingEvent")<
@btoo
btoo / useEvent.ts
Last active March 26, 2024 04:33
typescript type-safe version of the approximate implementation of react's (no longer) proposed useEvent hook
import { useCallback, useLayoutEffect, useRef } from 'react';
/** typescript type-safe version of [the approximate implementation of react's (no longer) proposed `useEvent` hook](https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md#internal-implementation) */
export function useEvent<Args extends Array<unknown>, Return>(
handler: (...args: Args) => Return,
): typeof handler {
const handlerRef = useRef(handler);
useLayoutEffect(() => {
handlerRef.current = handler;

Here is a simple flow chart:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
@btoo
btoo / replace-replaceAll.ts
Last active March 7, 2023 20:49
TypeScript type-safe string replace and replaceAll (doesn't support regex) using template literal types (note: this is just a proof of concept and shouldnt be taken seriously)
type Replace<
T extends string,
Match extends string,
Replacement extends string
> = T extends `${infer Prefix}${Match}${infer Postfix}`
? `${Prefix}${Replacement}${Postfix}`
: never;
type ReplaceAll<
T extends string,
@btoo
btoo / proto2ts.sh
Last active August 26, 2022 02:12
i stole this protobuf-to-typescript converter from a really smart friend of mine
#!/usr/bin/env bash
DIR=$(dirname "${BASH_SOURCE[0]}")
DIR=$(cd "$DIR" || exit; pwd -P)
if ! type protoc &> /dev/null; then
echo "Dependency 'protoc' is not installed."
echo
echo " If you are on macOS, you can use 'brew install protobuf'."
echo
@btoo
btoo / useKeyboardHeight.ts
Last active March 22, 2024 08:52
react native keyboard height hook
import { useEffect } from "react";
import { Keyboard } from "react-native";
import { useState } from "./mounted";
export function useKeyboardHeight() {
const [keyboardHeight, setKeyboardHeight] = useState(0);
useEffect(() => {
const showSubscription = Keyboard.addListener('keyboardDidShow', e => setKeyboardHeight(e.endCoordinates.height));
const hideSubscription = Keyboard.addListener('keyboardWillHide', () => setKeyboardHeight(0));
@btoo
btoo / mounted-utility-hooks.ts
Last active October 16, 2023 16:20
Tired of seeing the `Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.` error?
// Tired of seeing the
// `Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.`
// error?
// Then use these utility hooks to make sure things don't happen in unmounted components!
import { useCallback, useEffect, useRef, useState } from "react";
import type { Dispatch, SetStateAction, DependencyList } from 'react'
export function useMountedRef() {
const mountedRef = useRef(true);
@btoo
btoo / .eslintignore
Last active May 9, 2020 15:13
husky pre-commit hook to `eslint --fix` and `prettier --write` files staged in git
*dist*
*.json
yarn.lock
*.proto
*.md
Makefile
.eslintignore
@btoo
btoo / ‎.gif
Last active April 18, 2020 06:25
‎.gif
@btoo
btoo / .huskyrc.js
Last active June 6, 2023 08:33
husky pre-commit hook for handling ONLY staged files that will prevent commit if there are linting errors and auto-fix them
/**
* @see {@tutorial https://github.com/typicode/husky}
* _Requires Node >= 10 and Git >= 2.13.0._
*/
module.exports = {
hooks: {
/**
* @see {@tutorial https://stackoverflow.com/a/15656652/3942699}
*
* ___only works with files staged in git___