Skip to content

Instantly share code, notes, and snippets.

@toyosiola
toyosiola / Component.tsx
Created October 30, 2025 08:24
A progressive spin animation with motion package
import useProgressiveSpin from "@/hooks/use-progressive-spin";
import { motion } from "motion/react";
export default function SpinningDisjointedYellowPolygon({
wrapperClassName,
children
}: {
wrapperClassName?: string;
children: JSX.Element;
}) {
import { toast } from "sonner";
export default async function copyToClipboard(text: string) {
await navigator.clipboard.writeText(text);
toast.success("Copied to clipboard", {
duration: 2000,
position: "bottom-center",
});
}
@toyosiola
toyosiola / env.client.ts
Created October 20, 2025 20:03
Validate envs on app load
import { z } from "zod";
const envSchema = z.object({
NEXT_PUBLIC_SUPABASE_URL: z.string().trim().min(1),
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY: z.string().trim().min(1),
});
function validateEnv() {
try {
return envSchema.parse({
@toyosiola
toyosiola / Component.tsx
Created October 20, 2025 19:50
Create a cooldown/countdown func to limit frequency of action within a timeframe. Also utilizes local stoage to persist across page/tab reload
import { useCooldown } from "@/hooks/useCoolDown";
const { remainingTime, startCooldown } = useCooldown(
"forgot_password_timestamp",
2 * 60 * 1000, // 2 minutes
);
async function onSubmit(data: ForgotPasswordFormData) {
try {
// Process form...
@toyosiola
toyosiola / Component.tsx
Created October 20, 2025 19:42
animate figures counting up fro zero
"use client";
import React from "react";
import { motion } from "framer-motion";
import useCountUp from "@/hooks/useCountUp";
const stats = [
{ value: "500+", label: "Label A" },
{ value: "97%", label: "Label B" },
{ value: "200+", label: "Label C" },
import useHCaptcha from "@/hooks/useHCaptcha";
import HCaptcha from "@hcaptcha/react-hcaptcha";
const { captchaToken, resetCaptcha, captchaProps } = useHCaptcha();
async function onSubmit(data: LoginFormData) {
if (!captchaToken) {
toast.error("Please complete the captcha verification");
return;
}
@toyosiola
toyosiola / FormInput.tsx
Created October 20, 2025 18:31
Reusable text input with react hook form
"use client";
import { cn } from "@/lib/utils";
import type { FieldError, FieldValues, Path, UseFormRegister } from "react-hook-form";
import { Eye, EyeOff } from "lucide-react";
import { useState } from "react";
interface NewFormInputProps<T extends FieldValues> {
name: Path<T>;
type: string;
@toyosiola
toyosiola / gist:6dd64d6aacedac783e965b616affa9de
Created October 16, 2025 18:22
Connect different remote repo to a local repo of the same project files but unrelated commit histories
1. Add the remote repo: git remote add newRemoteName https://remote-url
2. Ensure local branch is up to date:
- git switch main
- git pull origin main
3. Fetch all commits from the new remote: git fetch newRemoteName
4. Merge unrelated histories: git merge newRemoteName/main --allow-unrelated-histories
5. Resolve (all possible) conflicts, and then commit
6. Finally, push the merged history back: git push newRemoteName main
@toyosiola
toyosiola / upload with progress tracking.js
Created July 23, 2025 11:43
File upload using vanilla JS xmlhttprequest with progress tracking
const uploadUrl = `https://api.cloudinary.com/v1_1/${cloud_name}/image/upload`;
const uploadData = await new Promise<{ secure_url: string }>(
(resolve, reject) => {
// create XMLHttpRequest object
const xhr = new XMLHttpRequest();
// open POST request to Cloudinary upload endpoint
xhr.open("POST", uploadUrl);
// set upload onprogress event listener to update progress bar
xhr.upload.onprogress = (event) => {
@toyosiola
toyosiola / dark mode.js
Created March 6, 2025 18:23
Setting light and dark mode depending on the user preference or the system wide theme settings. Give priority to user settings, if there is no user settings, use the system settings.
// THEME TOGGLING FOR SEPARATE LIGHT, DARK AND SYSTEM THEME BUTTONS
// user setting theme to light mode
function setLightTheme() {
document.documentElement.classList.remove("dark");
localStorage.setItem("theme", "light");
}
// user setting theme to dark mode
function setDarkTheme() {
document.documentElement.classList.add("dark");