Given the following structure:
| global.css
| lib
| -- utils.css
| ui
| -- button.css
| -- button.tsx
| -- text.css
import * as React from 'react'; | |
export function useMap<K = unknown, V = unknown>( | |
initialEntries?: readonly (readonly [K, V])[] | null, | |
): IMap<K, V> { | |
const [map, setMap] = React.useState(() => new Map(initialEntries)); | |
return { | |
raw: map, | |
clear: React.useCallback(() => { | |
setMap((map) => { |
[ | |
{ | |
"context": "Editor", | |
"bindings": { | |
"escape": "editor::Cancel", | |
"backspace": "editor::Backspace", | |
"shift-backspace": "editor::Backspace", | |
"ctrl-h": "editor::Backspace", | |
"delete": "editor::Delete", | |
"ctrl-d": "editor::Delete", |
Given the following structure:
| global.css
| lib
| -- utils.css
| ui
| -- button.css
| -- button.tsx
| -- text.css
Given the following structure:
| global.css
| lib
| -- utils.css
| ui
| -- button.css
| -- button.tsx
| -- text.css
function CarouselExample() { | |
// data we might use to render the carousel. This is just a generic example, | |
// data could come from anywhere. For us it comes from Replo component data. | |
const products = useProductsQuery({ limit: 10 }); | |
const matchesMobile = useMatchMedia(MOBILE_MQ); | |
const matchesTablet = useMatchMedia(TABLET_MQ); | |
const [activeSlide, setActiveSlide] = React.useState(0); | |
const slides = products.length; |
import { redirect, type LoaderArgs } from "@remix-run/node"; | |
export async function removeTrailingSlashes(request: Request) { | |
let url = new URL(request.url); | |
if (url.pathname.endsWith("/") && url.pathname !== "/") { | |
throw redirect(url.pathname.slice(0, -1) + url.search); | |
} | |
} | |
export async function loader({ request }: LoaderArgs) { |
/** | |
* ------------------------------------------------------------------------------ | |
* 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. |
import * as React from "react"; | |
import { useNavigation, type Navigation } from "@remix-run/react"; | |
export function useTransition(): Transition { | |
let navigation = useNavigation(); | |
return React.useMemo( | |
() => convertNavigationToTransition(navigation), | |
[navigation] | |
); |