Skip to content

Instantly share code, notes, and snippets.

View rphlmr's full-sized avatar
Making things with Remix Run

Raphaël Moreau rphlmr

Making things with Remix Run
View GitHub Profile
@burkeholland
burkeholland / 4.1.chatmode.md
Last active August 8, 2025 15:27
4.1 Beast Mode v2
description tools
4.1 Beast Mode
changes
codebase
editFiles
extensions
fetch
findTestFiles
githubRepo
new
openSimpleBrowser
problems
readCellOutput
runCommands
runNotebooks
runTasks
runTests
search
searchResults
terminalLastCommand
terminalSelection
testFailure
updateUserPreferences
usages
vscodeAPI

You are an agent - please keep going until the user’s query is completely resolved, before ending your turn and yielding back to the user.

@KristofferEriksson
KristofferEriksson / useCookie.ts
Created January 29, 2024 09:16
A hook to easily read and update browser cookies. Plus, it auto-updates your component when cookie values change
import { useEffect, useState } from "react";
type UseCookieReturnType = {
cookie: string | undefined;
setCookie: (value: string, days?: number) => void;
};
const useCookie = (cookieName: string): UseCookieReturnType => {
const getCookie = (name: string): string | undefined => {
const value = `; ${document.cookie}`;
@KristofferEriksson
KristofferEriksson / useMeasure.ts
Created January 27, 2024 16:52
A generic React TypeScript hook for measuring element dimensions in real-time
import { useEffect, useRef, useState } from "react";
interface MeasureResult<T extends Element> {
ref: React.RefObject<T>;
bounds: DOMRectReadOnly;
}
const useMeasure = <T extends Element = Element>(): MeasureResult<T> => {
const ref = useRef<T>(null);
const [bounds, setBounds] = useState<DOMRectReadOnly>(new DOMRectReadOnly());
@KristofferEriksson
KristofferEriksson / useLocalStorage.ts
Last active July 25, 2024 19:33
An easy-to-use API for storing and retrieving data from Local Storage in React, with built-in real-time synchronization
import { useEffect, useState } from "react";
function useLocalStorage() {
const [loadingStates, setLoadingStates] = useState<Map<string, boolean>>(
new Map()
);
const setStorageValue = <T>(key: string, value: T) => {
try {
window.localStorage.setItem(key, JSON.stringify(value));
@KristofferEriksson
KristofferEriksson / useDynamicTextareaSize.ts
Last active April 9, 2024 10:49
A simple React hook to dynamically adjust the height of a textarea based on its content
/**
* Custom hook for dynamically resizing a textarea to fit its content.
* @param {React.RefObject<HTMLTextAreaElement>} textareaRef - Reference to the textarea element.
* @param {string} textContent - Current text content of the textarea.
* @param {number} maxHeight - Optional: maxHeight of the textarea in pixels.
*/
import { useEffect } from "react";
const useDynamicTextareaSize = (
textareaRef: React.RefObject<HTMLTextAreaElement>,
@Demandrel
Demandrel / style.css
Last active July 18, 2023 16:56
Style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'Rubik', system-ui, sans-serif;
}
}
@jordienr
jordienr / tailwind.config.ts
Created July 15, 2023 09:10
Tailwind SVG Grid Background
// Remember to install mini-svg-data-uri
// Follow me on twitter for memes @jordienr
import { type Config } from "tailwindcss";
const {
default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");
const svgToDataUri = require("mini-svg-data-uri");
export default {
@nandorojo
nandorojo / npm-rename.md
Last active January 30, 2025 15:15
How to rename an NPM package in your `package.json`

Add the package name you want to your package.json dependencies, and then make the value npm:<actual-package-name>. You can also add a version to the end.

package.json

{
  "dependencies": {
    "moti18": "npm:[email protected]"
  }
}
@kiliman
kiliman / index.tsx
Created February 7, 2023 21:31
Remix `useSubmitPromise` hook
import type { ActionArgs, LoaderArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import type { SubmitOptions } from "@remix-run/react";
import { useActionData, useNavigation, useSubmit } from "@remix-run/react";
import { useCallback, useEffect, useMemo } from "react";
export function loader({ request }: LoaderArgs) {
return json({ message: "Hello World" });
}
type InitFunction = (send: SendFunction) => CleanupFunction;
type SendFunction = (event: string, data: string) => void;
type CleanupFunction = () => void;
export function eventStream(request: Request, init: InitFunction) {
let stream = new ReadableStream({
start(controller) {
let encoder = new TextEncoder();
let send = (event: string, data: string) => {
controller.enqueue(encoder.encode(`event: ${event}\n`));