Skip to content

Instantly share code, notes, and snippets.

View oirodolfo's full-sized avatar
🏳️‍🌈
working from home

Rod Kisten (Costa) oirodolfo

🏳️‍🌈
working from home
View GitHub Profile
@nandorojo
nandorojo / rhf.ts
Created March 29, 2023 18:40
React Hook Form TypeScript Wrapper
import {
FormProvider,
useForm,
useWatch,
useFormState,
useFormContext,
Path,
ControllerProps,
Controller,
UseFormProps,
@jongan69
jongan69 / Readme.md
Last active November 10, 2023 07:10
usePagination Hook

React usePagination Hook

This hook returns a pagination range based on the current page, total number of items, and page size.

Usage

Import the usePagination hook in your React component as follows:

import { usePagination } from './usePagination';
@nandorojo
nandorojo / readme.md
Last active February 1, 2024 13:26
URQL Simple Pagination Hook implementation

This hook lets you use pagination from URQL. I needed a better solution for React Native and infinite lists.

It also has a pullToRefresh option. Since URQL's pull to refreshes are so insanely flickery, I decided to fake this completely, and make it pretend to spin for one second (plenty for most calls).

Be sure to use useMemo with your variables!

It comes with typesafety too.

const document = graphql(`
@wking-io
wking-io / app.css
Created January 30, 2023 21:09
Crunchy Data Tailwind config
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--gray-50: 250 250 250;
--gray-100: 244 244 245;
--gray-200: 228 228 231;
--gray-300: 161 161 170;
--gray-400: 212 212 216;
@redbar0n
redbar0n / routing-ideas.mdx
Last active July 18, 2024 12:12
Routing ideas

a thread where we can discuss some crazy routing ideas a bit out in the open branching out from the previous discussion on filesystem routes over at: https://discord.com/channels/815937377888632913/1014946079965454366

so, first of all, it seems there is a close alignment between how vite-plugin-ssr and router5 handles routing:

I recommend watching this router5 talk from 2:45 - 7:50 https://youtu.be/hblXdstrAg0?t=165 since it's really key to how I think about view / state separation, and I think of routing as a state separate from the view. (After all, and especially in a client-rendered app, what page it is showing is certainly a major part

@crashmax-dev
crashmax-dev / react-use-pagination.mjs
Created November 21, 2021 12:35
react-use-pagination.mjs
// src/getPaginationMeta.ts
var getPreviousEnabled = (currentPage) => currentPage > 0;
var getNextEnabled = (currentPage, totalPages) => currentPage + 1 < totalPages;
var getTotalPages = (totalItems, pageSize) => Math.ceil(totalItems / pageSize);
var getStartIndex = (pageSize, currentPage) => pageSize * currentPage;
var getEndIndex = (pageSize, currentPage, totalItems) => {
const lastPageEndIndex = pageSize * (currentPage + 1);
if (lastPageEndIndex > totalItems) {
return totalItems - 1;
}
import React from 'react';
import classnames from 'classnames';
import { usePagination, DOTS } from './usePagination';
import './pagination.scss';
const Pagination = props => {
const {
onPageChange,
totalCount,
siblingCount = 1,
currentPage,
@tannerlinsley
tannerlinsley / useBroadcastLeader.ts
Created June 4, 2021 14:37
A React Hook to determine if a tab of your application is the "leader" using BroadcastChannel and leader election
import { BroadcastChannel, createLeaderElection } from 'broadcast-channel'
import React from 'react'
const channels = {}
export function useBroadcastLeader(id = 'default') {
const [isBroadcastLeader, setIsBroadcastLeader] = React.useState(false)
React.useEffect(() => {
if (!channels[id]) {
@marco79cgn
marco79cgn / vaccination-stats.js
Last active January 11, 2023 21:47
A Scriptable widget that shows the amount of people who have received the corona vaccination in Germany
// Version 1.3.0
// 27.11.2021
//
// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: red; icon-glyph: notes-medical;
// Mit Caching und Fallback
const cacheMinutes = 60; // 60 min
const today = new Date();
const neededTotalVaccinations = 83200000;
@ClickerMonkey
ClickerMonkey / types.ts
Last active August 8, 2024 00:25
Typescript Helper Types
// when T is any|unknown, Y is returned, otherwise N
type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N;
// when T is never, Y is returned, otherwise N
type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N;
// when T is a tuple, Y is returned, otherwise N
// valid tuples = [string], [string, boolean],
// invalid tuples = [], string[], (string | number)[]