Skip to content

Instantly share code, notes, and snippets.

View nandorojo's full-sized avatar

Fernando Rojo nandorojo

View GitHub Profile
////////////////////////////////////////////////////////////////////////////////
// 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;
@pugson
pugson / sw.js
Created May 11, 2020 18:17
nuke your old service worker
// This is a worker that can be deployed in a desperate situation in order
// to disable all service worker caching by overwriting the running worker
// with a no-op worker.
//
// Keep it close for when you need it.
self.addEventListener("install", () => {
// Activate immediately, taking control from any broken service workers
self.skipWaiting();
});
@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 July 9, 2025 18:09
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})`;
}
@rjerue
rjerue / Popover.js
Last active January 27, 2021 02:07
React Native Web Popovers
// web
import P, { ArrowContainer } from 'react-tiny-popover'
import React from 'react'
export default ({
visible = false,
position,
onClose,
children,
content = null,