Skip to content

Instantly share code, notes, and snippets.

View SebastianHGonzalez's full-sized avatar

Sebastian Gonzalez SebastianHGonzalez

View GitHub Profile
/**
* Given an async function it will be executed until:
* - maxAttempts has been reached
* - it resolves
* - continueRef turned false
*
* Based off Trey Huffine's article: https://levelup.gitconnected.com/polling-in-javascript-ab2d6378705a
* Adapted to work on react components
*
* @param {Function} fn async function to execute.
import styled from 'styled-components';
import {
string, bool, oneOf, number,
} from 'prop-types';
function filterObject (f, obj) {
return Object.fromEntries(Object.entries(obj).filter(f));
}
function not (f) {
@SebastianHGonzalez
SebastianHGonzalez / useQueryState.ts
Last active April 1, 2024 09:10
useQueryState - query string synchronized use state hook for next.js
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
type IParam = string;
type IValue = string | string[] | number | number[] | null | undefined;
type IState = { [k: string]: IValue };
type IQuery = IState;
type IRoute = string;
function isEmpty(value: IValue): boolean {
@SebastianHGonzalez
SebastianHGonzalez / Carousel.jsx
Last active January 3, 2020 19:19
Carousel component with seamless infinite scroll
import { useRef, useEffect } from 'react';
export default function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
import React, {
useCallback, useState, useEffect, cloneElement,
} from 'react';
import { findDOMNode } from 'react-dom';
import { node, bool, number } from 'prop-types';
import styled from 'styled-components';
import usePrevious from 'hooks/usePrevious';
const Collapsible = styled.div.attrs(
import {
createElement, useState, useEffect, useCallback,
} from 'react';
import {
oneOfType, instanceOf, number, elementType,
} from 'prop-types';
function formatUnit (n) {
return Math.floor(n).toString().padStart(2, '0');
}
import React, { useCallback, useMemo } from "react";
import { string, func, number } from "prop-types";
import styled from "styled-components";
import DefaultButton from "components/common/input/Button";
import I18n from "components/common/I18n";
import Dots from "components/common/icons/Dots";
const Button = styled(DefaultButton)`
margin: 0 0.25rem;
import React, {
useMemo,
useState,
useEffect,
useRef,
useCallback
} from "react";
import { number } from "prop-types";
import { Map, TileLayer, Marker } from "react-leaflet";
import L from "leaflet";
import { createContext } from "react";
const SessionContext = createContext();
export function SessionProvider({ session, children }) {
return (
<SessionContext.Provider value={session}>
{children}
</SessionContext.Provider>
);