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 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
View App.CitySearch.jsx
import React, { useState, useEffect } from "react";
import "./packages/combobox/styles.css";
import {
Combobox,
ComboboxInput,
ComboboxList,
ComboboxOption,
ComboboxPopup
} from "./packages/combobox/index";
View App.Combobox.js
import React, { useState, useEffect } from "react";
import "./packages/combobox/styles.css";
import {
Combobox,
ComboboxInput,
ComboboxList,
ComboboxOption,
ComboboxPopup
} from "./packages/combobox/index";
View controlled.md

When it comes to inputs, there are two types of them, "uncontrolled" and "controlled" inputs.

The inputs on the Login/Signup components were uncontrolled, that means that they owned their own state, or more specifically they own their own value.

In practical terms, an uncontrolled component is one whose value is changed exclusively by the user interacting with it.

You can still set the initial state of an uncontrolled component with defaultValue (and defaultChecked).

A controlled component is one that does not own its state, but rather its state is controlled by the component that rendered it.

You can’t perform that action at this time.