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';
import { | |
FormProvider, | |
useForm, | |
useWatch, | |
useFormState, | |
useFormContext, | |
Path, | |
ControllerProps, | |
Controller, | |
UseFormProps, |
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(`
@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; |
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:
view === 'overview'
) @ https://vite-plugin-ssr.com/layouts#nested-layoutsroute === 'dashboard'
) @ https://youtu.be/hblXdstrAg0?t=197
maybe with the small exception that router5 has the explicit perspective of routes as app state whereas I didn't get the impression from vps that it's viewed as such (even though it technically is still state).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
// 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, |
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]) { |
// 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; |
// 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)[] |