PaulieScanlon

import { useState, useEffect } from 'react'

const QUERY_STRING = '(prefers-reduced-motion: no-preference)'
const EVENT = 'change'

const usePrefersReducedMotion = () => {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(true)

  useEffect(() => {
    const query = window.matchMedia(QUERY_STRING)

PaulieScanlon

import React, { Fragment } from 'react';

export const wrapPageElement = ({ element, props }) => {
  const {
    location: { pathname },
  } = props

  return (
    <Fragment>
      <header className={`${pathname === '/' ? 'some-class' : 'some-other-class'} `}>

PaulieScanlon

export const onRouteUpdate = ({ location }) => {
  const jumplink = document.getElementById(location.hash)

  if (jumplink) {
    window.scrollTo({
      top: jumplink.offsetTop,
    })
  }
  return true
}

PaulieScanlon

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';

const Test = () => {
  const {
    file: {
      childImageSharp: { gatsbyImageData }
    }
  } = useStaticQuery(graphql`

PaulieScanlon

import { useEffect, useState } from 'react'

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(initialValue)
  const setValue = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value
      setStoredValue(valueToStore)
      window.localStorage.setItem(key, JSON.stringify(valueToStore))

PaulieScanlon

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

const Page = () => {
  const [response, setResponse] = useState(false);

  useEffect(() => {
    const getData = async () => {
      const response = await fetch(
        'https://api.oceandrivers.com/api/ODWeather'
      );

PaulieScanlon

module.exports = {
  stories: ["../src/**/*.stories.tsx"],
  addons: ["@storybook/addon-actions", "@storybook/addon-docs"],
  webpackFinal: async (config) => {
    config.module.rules.push(
      {
        // Config for js and jsx files
        test: /\.(js|jsx)$/,
        use: [
          {

PaulieScanlon

import React, { Fragment, FunctionComponent, useState, useEffect } from 'react'
import { Box, Grid, Message, Button } from 'theme-ui'

import { Client } from 'shopify-buy'

import { Loader } from '../loader'
import { Confetti } from '../confetti'

interface ICheckoutProps {
  /** Shopify Buy client */

PaulieScanlon

import React from 'react';

const ContentfulRender = ({ children }) => {
  return <>{process.env.GATSBY_CONTENTFUL_KEY ? <>{children}</> : null}</>;
};

export default ContentfulRender;

PaulieScanlon

using the example from https://paulie.dev/posts/2021/02/theme-ui-alpha-6/#css-keyframes 
you could also store the animationName as a const




const animationTypeOne = keyframes({
                '0%': {
                  opacity: 1,
                },