Skip to content

Instantly share code, notes, and snippets.

Ryan Florence ryanflorence

Block or report user

Report or block ryanflorence

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View migrate.jsx
// Step 1 - update component code
// before
const Thing = props => {
const { id } = props.match.params
const { location, history } = props
return <div/>
}
View everything-i-know-about-routing.md

Everything I Know About UI Routing

Definitions

  1. Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
    1. pathname - The "file/directory" portion of the URL, like invoices/123
    2. search - The stuff after ? in a URL like /assignments?showGrades=1.
    3. query - A parsed version of search, usually an object but not a standard browser feature.
    4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
    5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.
View firebase.js
function SomeComp() {
// initialize some state
const [tacos, setTacos] = useState(null)
// use an effect to set up the subscription
useEffect(() => {
// make a query to the db
return db
.collection("tacos")
.limit(20)
View aria-link-alt.js
View useCallback.js
const callbacks = []
const deps = []
let callCount = 0
function useCallback(callback, deps) {
// figure out which useCallback we're rendering
// (each render starts at -1)
const id = ++callCount
// second render
View blah.js
function handleKeyDown(event) {
if (event.key === "Tab" && event.shiftKey) {
if (shiftTabbedFromElementAfterTrigger(event)) {
focusLastTabbableInPopover(event);
} else if (shiftTabbedOutOfPopover(event)) {
focusTriggerRef(event);
} else if (shiftTabbedToBrowserChrome(event)) {
disableTabbablesInPopover(event);
}
} else if (event.key === "Tab") {
View foo.js
function ModalExampleFocusManagement({ label="Hamburger" }) {
const [isOpen, setIsOpen] = useState(false)
const triggerRef = useRef()
const headingRef = useRef()
const justOpenedRef = useRef(false)
useEffect(() => {
if (justOpenedRef.current) {
justOpenedRef.current = false
headingRef.current.focus()
View foo.js
function RadioGroup({ onChange, name, children }) {
const [state, inputProps] = useRadioGroup(name)
return (
<Context.Provider value={inputProps}>
{children}
</Context.Provider>
)
}
function RadioInput(props) {
View index.js
import "app/index.css"
import "app/App.css"
import "./styles.css"
import React, { useState, useEffect } from "react"
import ReactDOM from "react-dom"
function App() {
const [appTime] = useState(Date.now())
return (
View Feed.js
import React, { useState, useEffect } from "react"
import FeedPost from "app/FeedPost"
import {
loadFeedPosts,
subscribeToNewFeedPosts
} from "app/utils"
// import FeedFinal from './Feed.final'
// export default FeedFinal
export default Feed
You can’t perform that action at this time.