Skip to content

Instantly share code, notes, and snippets.

View isocroft's full-sized avatar
😜
Seriously fooling around!

Ifeora Okechukwu Patrick isocroft

😜
Seriously fooling around!
View GitHub Profile
@isocroft
isocroft / NextJSRouteLoader.tsx
Last active October 30, 2024 17:18
A custom ReactJS component for handling loading wait time between route changes for NextJS v11+ page router software
import React, { useRef, useState, useEffect } from "react";
import { useRouter } from "next/router";
const useNexJSPreviousRoute = () => {
const router = useRouter();
const ref = useRef<string>("");
useEffect(() => {
@isocroft
isocroft / useNextJSPreviousRoute.ts
Last active October 30, 2024 14:42
A custom NextJS hook that returns the previous route visited in a browser application
import { useRouter } from "next/router";
import { useRef, useEffect } from "react";
export const useNexJSPreviousRoute = () => {
const router = useRouter();
const ref = useRef<string>("");
useEffect(() => {
if (ref.current === "") {
@isocroft
isocroft / useReactQueryCache.ts
Last active December 13, 2025 03:52
A custom ReactJS/NextJS hook based on @tanstack/react-query that queries the cache for the contents at a given query key
import { useRef, useEffect } from "react";
import { useQueryClient } from "@tanstack/react-query";
import type { InvalidateQueryFilters, UseMutationOptions, UseQueryOptions } from "@tanstack/react-query";
type TypeSafeQueryKey<TQueryFnData> = UseQueryOptions<TQueryFnData>["queryKey"];
type TypeSafeMutationKey = NonNullable<UseMutationOptions["mutationKey"]>;
type ReactQueryCacheOptions<TQFnData> = {
noRenderOnWrite?: boolean,
@isocroft
isocroft / axiosPoweredClient.ts
Last active January 26, 2026 14:08
This is a simple http client on the browser powered by axios library which makes it easy to make async requests. as well as a mock
import axios, { AxiosError, AxiosHeaders } from "axios";
import AxiosMockAdapter from "axios-mock-adapter";
import type { AxiosResponse, AxiosRequestConfig } from "axios";
export type { AxiosError };
export interface OptionsArgs<BodyType, ParamType = unknown> {
body?: BodyType;
headers?: { [key: string]: string };
@isocroft
isocroft / NextJSFormStepsWizard.tsx
Last active December 28, 2024 10:59
A custom NextJS v11+ page router component that makes setting up a form steps wizard a breeze
import React, { useRef, useState, useEffect, useCallback, Children, isValidElement, cloneElement } from "react";
import Router from "next/router";
import useIsFirstRender from "beautiful-react-hooks/useIsFirstRender";
export type FormStepComponentProps = {
currentStep: string | number,
stepsTotal: number,
/* @ts-ignore */
onStepChange: (data: Record<string, any>, disableFormSubmission?: boolean, shouldNavigate?: boolean) => Promise<boolean>,
@isocroft
isocroft / assertionSignatureValidation.tsx
Created March 17, 2024 11:24
Using assertion signatures to validate data from external sources using the Yup validation/schema library
import Yup from "yup";
import type { InferType } from "yup";
const UserSchema = Yup.object({
name: Yup.string().required(),
email: Yup.string().email().required(),
fullname: Yup.string().required(),
title: Yup.string().required(),
gender: Yup.string().required().default("male"),
rating: Yup.number().min(1).max(10).required(),
@isocroft
isocroft / useQueryHooksMap.tsx
Last active November 8, 2025 21:00
This is a custom hook that allows you to utilize a simple strategy pattern to select <@tanstack/react-query> `useQuery` custom hooks within a single component
import React, { useContext, useMemo, useRef, useEffect } from "react";
import type { ComponentProps } from "react";
import type { UseQueryResult } from "react-query";
type ReactQueryFetchHook<F extends Array<unknown>, Q = any, E = unknown, P = any> = (...hookArguments: [...F, P?]) => UseQueryResult<Q, E>
const QueryHooksMapContext = React.createContext<Record<(string & {}), ReactQueryFetchHook<unknown[]>>>({});
type QueryHooksProviderProps = ComponentProps<typeof QueryHooksMapContext.Provider>
@isocroft
isocroft / object-watch.js
Created July 15, 2024 09:09 — forked from eligrey/object-watch.js
object.watch polyfill in ES5
/*
* object.watch polyfill
*
* 2012-04-03
*
* By Eli Grey, http://eligrey.com
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
@isocroft
isocroft / expect.js
Last active November 10, 2025 23:59
A toy assertion case processor for asserting on test case assertions for a non-existent fictitious test framework (CommonJS) with the option to extend it
/* @HINT: NPM package for rendering colored text on the command-line (or standard output) */
const chalk = require('chalk');
/* @HINT: This uses the `chalk` NPM package to setup colors for failed test assertions as well as passed test assertions */
const failStatus = chalk.red;
const passStatus = chalk.green;
/* @HINT: A helper function using the status of an assertion to color text sent to the command-line (or standard output) */
const standardOutputPrettify = (isOk, statusText, prefix = "") => {
return isOk
@isocroft
isocroft / chunked-upload-via-content-range-http-streaming-header.js
Created October 9, 2024 17:19
How to upload 50 GB of file data using client-side JavaScript
const fileInput = window.document.getElementById('file_input');
const fileUploadChunkSize = 10 * Math.pow(1024, 2) // 10 by 1MB = 10MB
fileInput.adddEvenListener('change', (event) => {
const [ file ] = event.target.files;
const reader = file.stream().getReader();
let uploadedBytes = 0;
console.info('Upload Start >');