Skip to content

Instantly share code, notes, and snippets.

View guillermodlpa's full-sized avatar

Guillermo guillermodlpa

View GitHub Profile
guillermodlpa / useAutoplay.ts
Created August 21, 2023 10:49
hook to autoplay a video
View useAutoplay.ts
import { MutableRefObject, useEffect } from 'react';
const AUTO_PLAY_DELAY = 1500;
"play() failed because the user didn't interact with the document first";
export default function useAutoplay(
videoRef: MutableRefObject<HTMLVideoElement | HTMLAudioElement | undefined>,
isActive: boolean,
) {
guillermodlpa / useResponsiveGridWithLastRowCentering.tsx
Last active September 8, 2023 10:21
React hook to render a responsive CSS grid centering the elements in the last row
View useResponsiveGridWithLastRowCentering.tsx
import useBreakpointValueWithDeviceType from '@/hooks/useBreakpointValueWithUADetection/useBreakpointValueWithDeviceType';
import { BoxProps } from '@chakra-ui/react';
import { useMemo } from 'react';
// Controlling Leftover Grid Items with Pseudo-selectors
// @see
function generateCenteredGridStyles(columnCount: number): BoxProps['sx'] {
const itemStyles: Record<string, string | Record<string, string>> = {
gridColumn: 'span 2',
guillermodlpa / Compose.tsx
Created August 7, 2023 08:41
Component to compose context providers and pass separate props to each of them
View Compose.tsx
type Components =
| React.ElementType
| [React.ElementType, { [key: string]: unknown }];
const Compose = ({
}: {
components: Components[];
children: JSX.Element;
View composeContextProviders.tsx
export default function composeContextProviders(providers: React.ElementType[]) {
return providers.reduce(
(Prev, Curr) =>
function ComposedProviderWrapper({ children }) {
return (
guillermodlpa / createDialogContext.tsx
Created July 6, 2023 09:58
Utility function to create a dialog context in MUI v5, for dialogs opened across the application that need their state in context
View createDialogContext.tsx
import { createContext, useContext, useState } from 'react';
class NoContextProviderError extends Error {
constructor() {
super('Context value was undefined');
* Utility to create a context for a dialog, to reduce boilerplate
View getImageFileDimensions.tsx
* Get the dimensions of an image file
* Check the mime type before calling this function
export default function getImageFileDimensions(
imageFile: File,
): Promise<{ width: number; height: number }> {
return new Promise((resolve, reject) => {
if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
guillermodlpa / marketing-site-render.ts
Created June 6, 2023 15:22
Next.js API route that fetches a page from another site and renders it. Combined with a rewrite fallback rule, this can help integrate pages from a CMS into a Next.js app
View marketing-site-render.ts
import type { NextApiRequest, NextApiResponse } from 'next';
function replaceUrlsInHtmlPage(htmlPage: string, urls: string[], newUrl: string) {
return urls.reduce((memo, url) => memo.replace(new RegExp(url, 'g'), newUrl), htmlPage);
* This endpoint is used as a fallback for any route that is not handled by Next.js.
* This way, we can mix a marketing site hosted in WordPress and the app in the same domain
guillermodlpa / smoothScroll.ts
Last active June 13, 2023 10:37
smooth scroll function. native scrollTo or scrollIntoView conflict with each other if there are different horizontal and vertical scrolls happening
View smoothScroll.ts
* Inspired by
* With added support for horizontal scrolling, scrolling the window, and linear easing
* native scrollTo or scrollIntoView conflict with each other if there are different horizontal and vertical scrolls happening
// Easing equations,
function easeOutCubic(t: number, b: number, c: number, d: number) {
guillermodlpa /
Created March 7, 2023 13:25
Exports a list of env vars to the environment, supporting spaces, newline chars and quotes in the value
# wraps the env var values in quotes and handles newlines
# It's a more sohisticated version from just doing export $($ENV_VARS)
# and it doesn't break with newline characters, quotes or spaces in the values (note the encoding with sed)
eval "$(
printf '%s\n' "$ENV_VARS" | while IFS='' read -r line; do
key=$(printf '%s\n' "$line"| sed 's/"/\\"/g' | cut -d '=' -f 1)
value=$(printf '%s\n' "$line" | cut -d '=' -f 2- | sed 's/"/\\\"/g')
guillermodlpa /
Created March 7, 2023 12:53
Snippet of code to format a plain JSON encoded object into env var file format (KEY=value) using jq
# Formats something like
# '{"MODE":"dev","HOST":"db"}'
# to
# MODE=dev
# HOST=db