Skip to content

Instantly share code, notes, and snippets.

View nandorojo's full-sized avatar

Fernando Rojo nandorojo

View GitHub Profile
@nandorojo
nandorojo / use-swr-infinite-enhanced.ts
Last active July 10, 2023 11:01
useSWRInfinite with pagination & typescript safety
import { ConfigInterface, useSWRInfinite } from 'swr'
import { useMemo, useCallback, useRef } from 'react'
import last from 'lodash.last'
import get from 'lodash.get'
type PageKeyMaker<Page, Key extends any[]> = (
index: number,
previousPageData?: Page
/**
* Mutable ref object. Set this to `true` before the request and `false` afterwards if the request is fetching more.
@nandorojo
nandorojo / no-cache-swr.js
Created October 21, 2020 17:20
No-cache policy with Vercel's SWR
import useNativeSWR from 'swr'
import { useRef } from 'react'
// inspired by https://github.com/vercel/swr/discussions/456
export default function useSWR(key, fetcher, options = {}) {
const { cachePolicy, ...opts } = options
const random = useRef(new Date())
return useNativeSWR(
() => {
////////////////////////////////////////////////////////////////////////////////
// Create a directory called "pages" next to
// this file, put markdown files in there, and
// then run:
//
// ```
// $ node build.mjs
// ```
//
// Then deploy the "build" directory somewhere.
@ianmartorell
ianmartorell / HoverState.ts
Last active August 25, 2021 16:32 — forked from necolas/Hoverable.js
Hover styles in React Native for Web
/* eslint-disable no-inner-declarations */
import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
let isEnabled = false;
if (canUseDOM) {
/**
* Web browsers emulate mouse events (and hover states) after touch events.
* This code infers when the currently-in-use modality supports hover
* (including for multi-modality devices) and considers "hover" to be enabled
import Animated, {
useSharedValue,
withTiming,
useAnimatedStyle,
Easing,
makeRemote,
withSpring,
processColor,
useValue,
delay as RDelay,
@claus
claus / _app.js
Created May 14, 2020 05:35
Restore scroll position after navigating via browser back/forward buttons in Next.js
import useScrollRestoration from "utils/hooks/useScrollRestoration";
const App = ({ Component, pageProps, router }) => {
useScrollRestoration(router);
return <Component {...pageProps} />;
};
export default App;
@ChronSyn
ChronSyn / demo.tsx
Created April 17, 2020 19:52
expo useNotification
import * as React from "react";
import { TouchableOpacity, Text } from "react-native";
import { Notifications } from "expo"
import { useNotification } from "./useNotification";
const sendNotification = async () => await Notifications.presentLocalNotificationAsync(
{
title: "Notified!",
body: "Hello, World!",
data: {}
import React, { useRef, useEffect, memo } from 'react'
import { useRouter } from 'next/router'
const ROUTES_TO_RETAIN = ['/dashboard', '/top', '/recent', 'my-posts']
const App = ({ Component, pageProps }) => {
const router = useRouter()
const retainedComponents = useRef({})
const isRetainableRoute = ROUTES_TO_RETAIN.includes(router.asPath)
@slorber
slorber / react-navigation-tree.jsx
Last active August 13, 2022 19:17
react-navigation-tree.jsx
const App = createAppContainer(
createStack({
LoggedSwitch: createSwitch({
// When user is authenticated
LoggedIn: createStack({
// The logged in root is generally a tab or drawer navigator
LoggedInRoot: createTabsOrDrawer({
@Martin-Pitt
Martin-Pitt / pan-zoom-touch-and-trackpad.js
Last active December 22, 2023 02:16
Panning and Pinch-Zoom gesture handler for both touchscreens and trackpads; Works really well on a MacBook trackpad
// Target state
var tx = 0;
var ty = 0;
var scale = 1;
function visualiseTargetState() {
box.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
}