Skip to content

Instantly share code, notes, and snippets.

@ibelick
ibelick / compressImage.ts
Created April 7, 2022 09:38
Tiny function in JavaScript/TypeScript to compress image file. Generally use this to precompress a image on the client side before uploading it.
import Compressor from "compressorjs";
export const compressImage = async (
file: File,
quality: number,
maxHeight: number,
maxWidth: number,
convertSize?: number
): Promise<File | Blob> => {
return await new Promise((resolve, reject) => {
@ibelick
ibelick / Timer.jsx
Created March 24, 2022 08:43
Basic Timer in React
import React, { useEffect, useState } from "react";
import { dynamicTimeLeft } from "utils/date";
interface TimerProps {
dateEnd: Date;
}
const Timer: React.FC<TimerProps> = ({ dateEnd }) => {
const [time, setTime] = useState<null | string>(null);
@ibelick
ibelick / dynamicTimeLeft.ts
Created March 24, 2022 08:36
Dynamic JavaScript time counter
export const dynamicTimeLeft = (date1: Date, date2: Date) => {
const distance = date2.getTime() - date1.getTime();
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
const addZero = (t: number) => (t > 9 ? t : `0${t}`);
@ibelick
ibelick / useIpfs.ts
Created March 17, 2022 13:00
A simple React hook to upload a file or data into IPFS
import { create } from "ipfs-http-client";
import { ImportCandidate } from "ipfs-core-types/src/utils";
const client = create({ url: "https://ipfs.infura.io:5001/api/v0" });
const useIpfs = () => {
const upload = async (file: ImportCandidate) => {
try {
const added = await client.add(file);
const url = `https://ipfs.infura.io/ipfs/${added.path}`;
@ibelick
ibelick / SelectDisplayImage.tsx
Created March 15, 2022 16:23
Display an image selected from input type file with React + TypeScript
const SelectDisplayImage = () => {
const [image, setImage] = useState<null | string>(null);
const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const input = event.target;
if (!input.files?.length) {
return;
}
@ibelick
ibelick / usePrice.ts
Created March 9, 2022 15:19
Hook to get the current price of any cryptocurrencies in any other supported currencies that you need. (Coingecko API)
import useSWR from "swr";
import { fetcher } from "lib/fetch";
const usePrice = (fromCurrencies: string, vsCurrencies: string) => {
const { data, error } = useSWR(
`https://api.coingecko.com/api/v3/simple/price?ids=${fromCurrencies}&vs_currencies=${vsCurrencies}`,
fetcher
);
return {
@ibelick
ibelick / IconButton.tsx
Created February 21, 2022 11:04
Circular Button with Icon (Tailwind CSS)
const IconButton = () => {
return (
<button className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 text-black drop-shadow-sm transition-colors duration-150 hover:bg-gray-200">
<svg className="h-4 w-4 fill-current" viewBox="0 0 20 20">
<path
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
clip-rule="evenodd"
fill-rule="evenodd"
></path>
</svg>
@ibelick
ibelick / Progress
Created February 21, 2022 11:32
Progress Bar with Tailwind CSS + TypeScript
interface ProgressProps {
label?: string;
value: number;
}
const Progress: React.FC<ProgressProps> = ({ label, value }) => {
return (
<>
{label ? (
<div className="mb-1 flex justify-between">
@ibelick
ibelick / tailwind-spinner.svg
Last active February 17, 2022 16:01
A classic tailwind CSS spinner svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@ibelick
ibelick / Dialog.tsx
Created February 16, 2022 15:57
A Dialog component by Radix UI and Tailwind CSS
import { useState, Fragment } from "react";
import { Transition } from "@headlessui/react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import * as Portal from "@radix-ui/react-portal";
interface DialogProps {
trigger: React.ReactNode;
}
const Dialog: React.FC<DialogProps> = ({ trigger }) => {