Skip to content

Instantly share code, notes, and snippets.

Ryan Florence ryanflorence

View GitHub Profile
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.

View db.fake.js
// faking the firebase API to get as much as we need
import localforage from "localforage"
import { format } from "date-fns"
// localforage.clear()
// fakeStreamedData()
export const mode = "fake"
const FAKE_LATENCY = true
View wrapping.js
import React, { useState } from "react"
function UiButton({ onToggle, isActive: isActiveProp, ...props }) {
const [isActive, setIsActive] = useState(isActiveProp)
const isControlled = isActive != null
const clickHandler = isControlled
? onToggle
: () => {
View other.js
import * as React from "react";
const { useState } = React;
const Tab = ({
disabled = false,
children,
style,
isCurrent = false,
onClick
View foo.js
import * as React from "react";
const { useState } = React;
const Tab = ({
disabled = false,
children,
style,
isCurrent,
onClick
View old-values.js
const startDate =
location.state && location.state.startDate ? location.state.startDate : today
const prevStartRef = useRef(startDate)
let transitionDirection
if (prevStartRef.current !== startDate) {
transitionDirection = startDate < prevStartRef.current ? "earlier" : "later"
prevStartRef.current = startDate
}
View animation.js
const transitions = useTransition(
{ weeks, startDate },
item => item.startDate,
{
from: { y: -100 },
enter: { y: 0 },
leave: { y: 100 },
initial: null
}
)
View animation.js
animated.DialogOverlay = animated(DialogOverlay)
animated.DialogContent = animated(DialogContent)
function NewPostDialog({ date, show, onDismiss }) {
const rootRef = useRef(null)
const transitions = useTransition(show, null, {
from: { opacity: 0, y: -10, blur: 0 },
enter: { opacity: 1, y: 0, blur: 8 },
leave: { opacity: 0, y: -10, blur: 0 },
View animated-bar.example.jsx
import React, {
useState,
useRef,
useContext,
useLayoutEffect,
createContext
} from "react";
import "../styles.css";
import { Tabs, TabList, Tab, TabPanels, TabPanel } from "../src";
import { useRect } from "../../rect/src";
You can’t perform that action at this time.