Skip to content

Instantly share code, notes, and snippets.

Avatar

Jamie Haywood jamiehaywood

View GitHub Profile
View PageTwo.tsx
import React from "react";
import { useGlobalState } from "./GlobalStateProvider";
const PageTwo = () => {
const { state } = useGlobalState();
return (
<div>
<h1>State from PageOne:</h1>
View PageOne.tsx
import React from "react";
import { useHistory } from "react-router-dom";
import { useForm } from "react-hook-form";
import { useGlobalState, GlobalStateInterface } from "./GlobalStateProvider";
const PageOne = () => {
const history = useHistory();
const { handleSubmit, register } = useForm();
const { setState } = useGlobalState();
View App.tsx
import React from "react";
import { Route, Switch } from "react-router-dom";
import { GlobalStateProvider } from "./GlobalStateProvider";
import PageOne from "./PageOne";
import PageTwo from "./PageTwo";
function App() {
return (
<Switch>
View GlobalStateProvider.tsx
import React, { createContext, useState, useContext, Dispatch, SetStateAction } from "react";
export interface GlobalStateInterface {
firstname: string;
lastname: string;
age: string;
}
const GlobalStateContext = createContext({
state: {} as Partial<GlobalStateInterface>,
View useGlobalState.tsx
const useGlobalState = () => {
const context = useContext(GlobalStateContext);
if (!context) {
throw new Error("useGlobalState must be used within a GlobalStateContext");
}
return context;
};
View GlobalStateProvider.tsx
const GlobalStateProvider = ({
children,
value = {} as GlobalStateInterface,
}: {
children: React.ReactNode;
value?: Partial<GlobalStateInterface>;
}) => {
const [state, setState] = useState(value);
return (
<GlobalStateContext.Provider value={{ state, setState }}>
View GlobalStateContext.tsx
const GlobalStateContext = createContext({
state: {} as Partial<GlobalStateInterface>,
setState: {} as Dispatch<SetStateAction<Partial<GlobalStateInterface>>>,
});
View GlobalStateInterface.tsx
export interface GlobalStateInterface {
firstname: string;
lastname: string;
age: string;
}
@jamiehaywood
jamiehaywood / SVGButton.tsx
Created May 13, 2020
Reusable SVG base TypeScript button. It includes types to make it easy to consume.
View SVGButton.tsx
import React from "react";
import "./Button.scss";
import * as SVG from "../../images";
import { Link } from "react-router-dom";
interface ButtonProps
extends React.DetailedHTMLProps<
React.ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> {
@jamiehaywood
jamiehaywood / axios.js
Created May 13, 2020
Axios Key Rotation
View axios.js
import axios from "axios";
import { getHeaders } from "./auth/getHeaders";
import { updateTokens } from "./auth/updateTokens";
// https://github.com/axios/axios/issues/1383
const customAxios = axios.create({
baseURL: process.env.REACT_APP_CAPTURAPI,
});