View useColorSchemePreference.ts
import React from "react"; | |
export type ColorScheme = "light" | "dark"; | |
export default function useColorSchemePreference( | |
defaultColorScheme: ColorScheme = "light" | |
) { | |
let darkQuery = "(prefers-color-scheme: dark)"; | |
let [colorScheme, setColorScheme] = React.useState<ColorScheme>( | |
typeof window === "object" && window.matchMedia |
View react-preload-example.js
import React from 'react'; | |
let DataContext = React.createContext(); | |
// A higher-order component for pairing preload function + component ... | |
function withData(preloadData, Component, autoPreloadOnRender = true) { | |
let needsPreload = !!autoPreloadOnRender; | |
let promise; | |
let value; |
View renderFeed.js
let feed = { | |
type: 'rss', | |
props: { | |
'xmlns:blogChannel': 'https://...', | |
version: '2.0', | |
children: [ | |
{ | |
type: 'channel', | |
props: { | |
title: 'Remix Blog', |
View useControl.js
function useControl(defaultValue, value, onChange) { | |
let [localValue, setLocalValue] = React.useState(defaultValue) | |
let isControlled = value != null // the key | |
let activeValue = isControlled ? value : localValue | |
let setActiveValue = nextValue => { | |
if (isControlled) { | |
if (onChange) { | |
onChange(nextValue) | |
} else { |
View expect-element.js
expect.extend({ | |
toContainElement(instance, targetElement) { | |
let matchingElements = instance.findAllByProps(targetElement.props); | |
if (matchingElements.length === 0) { | |
return { | |
message() { | |
let props = JSON.stringify(targetElement.props); | |
return `expected to find element with props ${props}`; | |
}, |
View react-router-lazy.js
import React from 'react'; | |
import { lazy } from 'react-suspense-resource'; | |
let Courses = lazy(() => import('./Courses.js')); | |
let CoursesIndex = lazy(() => import('./CoursesIndex.js')); | |
let routes = [ | |
{ | |
path: "courses", | |
element: <Courses />, |
View routes.js
let routes = ( | |
<RankedSwitch> | |
{/* | |
<RankedSwitch> picks the best child <Route> that matches | |
the path. Like <Switch>, it does not match deeply, so you | |
need to use /* on the path if you want to do that. Like | |
@reach/router's <Router>, it ranks the paths so you don't | |
have to think about ordering. | |
Con: You have to use /* to do deep matching |
View toggle-desktop-icons.sh
#!/bin/bash | |
# To install: just copy this script to your machine and name it whatever you want. | |
# Let's say you named it toggle-desktop-icons.sh, then all you need to do is make | |
# the script executable, like this: | |
# | |
# chmod +x toggle-desktop-icons.sh | |
# | |
# Now you can execute the script directly in the terminal any time you want to | |
# show/hide the desktop icons, like this: |
View useMediaQuery.js
import { useEffect, useState } from 'react'; | |
export default function useMediaQuery(query, defaultValue) { | |
const [matches, setMatches] = useState(defaultValue); | |
useEffect(() => { | |
const mql = window.matchMedia(query); | |
setMatches(mql.matches); |
View useUndo.js
import { useRef, useState } from 'react' | |
function useUndo([state, setState]) { | |
const history = useRef([state]) | |
const [index, setIndex] = useState(0) | |
function undo() { | |
setIndex(Math.max(index - 1, 0)) | |
} | |
function redo() { |
NewerOlder