Skip to content

Instantly share code, notes, and snippets.

View nandorojo's full-sized avatar

Fernando Rojo nandorojo

View GitHub Profile
@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
////////////////////////////////////////////////////////////////////////////////
// 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.
@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(
() => {
@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 / use-on-change.ts
Created December 23, 2020 00:12
React Hook that calls a function when a variable changes
import { useEffect, useRef } from 'react'
export default function useOnChange<T>(
value: T,
effect: (prev: T, next: T) => void
) {
const latestValue = useRef(value)
const callback = useRef(effect)
callback.current = effect
@nandorojo
nandorojo / _app.tsx
Last active August 2, 2022 16:12
React Native Web + Next.js Scroll Restoration
// pages/_app.js
import ReactNativeNextJsScrollRestore from '../react-native-next-scroll-restore'
import { useEffect } from 'react'
function MyApp({ Component, pageProps }) {
useEffect(() => {
const unsubscribe = ReactNativeNextJsScrollRestore.initialize()
return () => {
@mrousavy
mrousavy / MEMOIZE.md
Last active October 20, 2025 02:24
Memoize!!! 💾 - a react (native) performance guide
In computing, memoization or memoisation
is an optimization technique used primarily
to speed up computer programs by storing
the results of expensive function calls and  
returning the cached result when the same
inputs occur again.                                         
                                                     — wikipedia
@acro5piano
acro5piano / urqlClient.ts
Last active December 4, 2023 13:56
URQL + Firebase authentication
import {
Exchange,
cacheExchange,
createClient,
dedupExchange,
fetchExchange,
subscriptionExchange,
} from 'urql'
import { delay, empty, fromPromise, map, mergeMap, pipe, tap } from 'wonka'
import firebase from 'firebase' // NOTE: This is old Firebase version
diff --git a/node_modules/@expo/next-adapter/build/withExpo.js b/node_modules/@expo/next-adapter/build/withExpo.js
index 2e63eb4..b1cf9a9 100644
--- a/node_modules/@expo/next-adapter/build/withExpo.js
+++ b/node_modules/@expo/next-adapter/build/withExpo.js
@@ -7,8 +7,8 @@ function withExpo(nextConfig = {}) {
// Prevent define plugin from overwriting Next.js environment.
process.env.EXPO_WEBPACK_DEFINE_ENVIRONMENT_AS_KEYS = 'true';
const expoConfig = addons_1.withUnimodules(config, {
- projectRoot: nextConfig.projectRoot || process.cwd(),
- }, { supportsFontLoading: false });
@nandorojo
nandorojo / DraggableScrollView.tsx
Last active December 2, 2024 14:42
Make a horizontal `ScrollView` draggable with a mouse (`react-native-web`)
import React, { ComponentProps } from 'react'
import { ScrollView } from 'react-native'
import { useDraggableScroll } from './use-draggable-scroll'
export const DraggableScrollView = React.forwardRef<
ScrollView,
ComponentProps<typeof ScrollView>
>(function DraggableScrollView(props, ref) {
const { refs } = useDraggableScroll<ScrollView>({
outerRef: ref,