Skip to content

Instantly share code, notes, and snippets.

View jfreedman-eagent's full-sized avatar

Josh Freedman jfreedman-eagent

View GitHub Profile
@chaance
chaance / use-prompt.jsx
Last active December 6, 2023 12:51
Example implementation of `usePrompt` and React Router v5's `<Prompt>` with `unstable_useBlocker`
/**
* ------------------------------------------------------------------------------
* IMPORTANT UPDATE:
* This is *not* a complete implementation and I do not suggest using it!. This
* was primarily an experiment to determine whether or not a decent blocking
* hook could be implemented in userland, and the answer we came up with is NO.
*
* Luckily we added `usePrompt` (behind an `unstable_` flag) back to React Router
* a few versions ago! It's not documented [and I'm no longer on the team, so I
* probably won't try to do anything about that], but you can see it in source.
@MarksCode
MarksCode / use-prompt.ts
Last active May 28, 2024 12:55
return `usePrompt` capabilities from react-router
/**
* Prompts a user when they exit the page
*/
import { useCallback, useContext, useEffect } from 'react';
import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom';
function useConfirmExit(confirmExit: () => boolean, when = true) {
const { navigator } = useContext(NavigationContext);
@brophdawg11
brophdawg11 / App.jsx
Created July 29, 2022 14:03
React Router 6.4.0 Code Splitting Example
// Assume you want to do this in your routes, which are in the critical path JS bundle
<Route path="lazy" loader={lazyLoader} element={<Lazy />} />
// And assume you have two files containing your actual load and component:
// lazy-loader.ts -> exports the loader
// lazy-component.ts -> exports the component
// We'll render the component via React.lazy()
let LazyActual = React.lazy(() => import("./lazy-component"));