gragland

// Usage
function App() {
  const [darkMode, setDarkMode] = useDarkMode();

  return (
    <div>
      <div className="navbar">
        <Toggle darkMode={darkMode} setDarkMode={setDarkMode} />
      </div>
      <Content />

gragland

import { useMemo } from "react";
import { useParams, useLocation, useHistory, useRouteMatch } from 'react-router-dom';
import queryString from 'query-string';

// Usage
function MyComponent(){
  // Get the router object
  const router = useRouter();

  // Get value from query string (?postId=123) or route param (/:postId)

gragland

import { useState, useEffect } from 'react';

// Usage
function App() {
  const status = useScript(
    'https://pm28k14qlj.codesandbox.io/test-external-script.js'
  );

  return (
    <div>

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, useEffect } from 'react';

function App() {
  const columnCount = useMedia(
    // Media queries
    ['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'],
    // Column counts (relates to above media queries by array index)
    [5, 4, 3],
    // Default column count
    2

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

import { useState, useCallback } from "react";

function useToggle(initialValue = false){
  // State with initial boolean value (true/false)
  const [state, setState] = useState(initialValue);
  
  // Let's create a toggle function
  // This works, but we're using the state value from above
  // instead of the current state. Usually they are the same,
  // but if this hook was triggered multiple times rapidly then

gragland

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
const requireAuth = require("./_require-auth.js");
const { updateUser } = require("./_db.js");

export default requireAuth((req, res) => {
  const user = req.user;

  // If user already has a stripeCustomerId then return it in success response
  if (user.stripeCustomerId) {
    return res.send({

gragland

// Top level App component
import React from "react";
import { ProvideAuth } from "./use-auth.js";

function App(props) {
  return (
    <ProvideAuth>
      {/* 
        Route components here, depending on how your app is structured.
        If using Next.js this would be /pages/_app.js

gragland

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

// Usage
function App(){
  // State for storing mouse coordinates
  const [coords, setCoords] = useState({ x: 0, y: 0 });
  
  // Event handler utilizing useCallback ...
  // ... so that reference never changes.
  const handler = useCallback(