gragland

// Usage
function ProfilePage({ uid }) {
  // Subscribe to Firestore document
  const { data, status, error } = useFirestoreQuery(
    firestore.collection("profiles").doc(uid)
  );
  
  if (status === "loading"){
    return "Loading..."; 
  }

gragland

const getRawBody = require("raw-body");
const { updateUserByCustomerId } = require("./_db.js");

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY, {
  apiVersion: process.env.STRIPE_API_VERSION,
});

// Disable next.js body parsing (stripe needs the raw body to validate the event)
export const config = {
  api: {

gragland

import { useState, useEffect } from 'react';

// Usage
function App() {
  // Call our hook for each key that we'd like to monitor
  const happyPress = useKeyPress('h');
  const sadPress = useKeyPress('s');
  const robotPress = useKeyPress('r');
  const foxPress = useKeyPress('f');

gragland

import axios from 'axios'
import { useOptimisticMutation } from "./useOptimisticMutation.ts"

type Response = boolean
type Error = unknown
type MutationVariables = {itemId: string}
type Items = {id: string; name: string}[]
type Likes = {itemId: string}[]
type History = {type: string}[]

gragland

import { useState } from 'react';

// Usage
function App() {
  // Similar to useState but first arg is key to the value in local storage.
  const [name, setName] = useLocalStorage('name', 'Bob');

  return (
    <div>
      <input

gragland

import { useState, useCallback, useRef } from "react";

// Usage
function App() {
  const [hoverRef, isHovered] = useHover();

  return (
    <div ref={hoverRef}>
      {isHovered ? '😁' : '☹️'}
    </div>

gragland

import React, { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';

const MAX_DISTANCE = 200;
const RIGHT_PRIORITY = 1.2;
const DOWN_PRIORITY = 1.0;
const DIRECTION_WEIGHT = 50;
const ARROW_PADDING = 5;

const ChainContext = createContext();

gragland

import getFirebase from "./firebase.js";

function MyApp() {
  // Example function that wraps some firebase logic
  const onSignup = async (email, password) => {
    // Use await to ensure firebase library is loaded
    const firebase = await getFirebase();
    // Call firebase methods as you normally would
    const { user } = await firebase.auth()
      .createUserWithEmailAndPassword(email, password);

gragland

import React, { useState, useEffect, useCallback } from 'react';

// Usage
function App() {
  const { execute, status, value, error } = useAsync(myFunction, false);

  return (
    <div>
      {status === 'idle' && <div>Start your journey by clicking a button</div>}
      {status === 'success' && <div>{value}</div>}

gragland

import Dashboard from "./Dashboard.js";
import Loading from "./Loading.js";
import { useRequireAuth } from "./use-require-auth.js";

function DashboardPage(props) {
  const auth = useRequireAuth();
  
  // If auth is null (still fetching data) 
  // or false (logged out, above hook will redirect)
  // then show loading indicator.