Skip to content

Instantly share code, notes, and snippets.

Avatar

Cory House coryhouse

View GitHub Profile
View ReactQueryDemo.jsx
import React from "react";
import { getUsers } from "./services/userService";
import { useQuery } from "react-query";
export default function ReactQueryDemo() {
const { data, isLoading, error } = useQuery("users", getUsers);
if (isLoading) return "Loading...";
if (error) return "Oops!";
return data[0].username;
}
View HookDemo.jsx
import React from "react";
import useFetch from "./useFetch";
export default function HookDemo() {
const { data, loading, error } = useFetch("users");
if (loading) return "Loading...";
if (error) return "Oops!";
return data[0].username;
}
View useFetch.js
import { useState, useEffect, useRef } from "react";
// This custom hook centralizes and streamlines handling of HTTP calls
export default function useFetch(url, init) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const prevInit = useRef();
const prevUrl = useRef();
View CentralDemo.jsx
import React, { useState, useEffect } from "react";
import { getUsers } from "./services/userService";
export default function CentralDemo() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
getUsers()
.then(json => {
View userService.js
export function getUsers() {
return fetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response =>
response.json()
);
}
View InlineDemo.jsx
import React, { useState, useEffect } from "react";
export default function InlineDemo() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(`${process.env.REACT_APP_API_BASE_URL}users`)
.then(response => {
@coryhouse
coryhouse / useIsTabbing.js
Last active Jun 26, 2020
React Hook to monitor if user is tabbing
View useIsTabbing.js
import { useState, useEffect } from "react";
/* Track whether user is interacting via keyboard.
This is used to determine if we should show focus rings.
Focus rings should only display on focus when isTabbing is true.
*/
export default function useIsTabbing() {
const [isTabbing, setIsTabbing] = useState(false);
useEffect(function listenForMouseClicksAndKeydowns() {
@coryhouse
coryhouse / InlineAlert.tsx
Last active May 18, 2020
Only allow certain child element types in React component
View InlineAlert.tsx
import React, { Suspense } from "react";
import "./InlineAlert.scss";
import cx from "classnames";
import * as ReactIs from "react-is";
const allowedChildren = ["string", "span", "em", "b", "i", "strong"];
type InlineAlertProps = {
/** Message to display */
children: React.ReactNode;
@coryhouse
coryhouse / PromptOnUnload.jsx
Last active May 5, 2020
Prompt user when they navigate away
View PromptOnUnload.jsx
import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { Prompt } from "react-router-dom";
// Prompt the user onbeforeunload or when navigating away by clicking a link
export default function PromptOnUnload({ when, message }) {
const enabled = when;
useEffect(() => {
if (!enabled) return;
const handleBeforeUnload = (event) => {
@coryhouse
coryhouse / BankHolidaysProvider.js
Last active Feb 12, 2020
React context provider that caches requests to avoid duplicate calls by each datepicker
View BankHolidaysProvider.js
/**
This provides bank holidays and a function to request bank holidays.
This is currently only used by the datepicker.
This provider assures each year's bank holidays are only requested once for a given app.
Place this provider at the app's entry point so that all child components can consume it.
**/
import React, { useState, useRef } from "react";
import PropTypes from "prop-types";
import BankHolidaysContext from "./BankHolidaysContext";
import { convertToDateObjects } from "../../../utils/dateUtils";
You can’t perform that action at this time.