Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
I've totally got Gatsby fever!

Paul Scanlon PaulieScanlon

💭
I've totally got Gatsby fever!
View GitHub Profile
View use-prefers-reduced-motion.js
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)
View gatsby-browser.js
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
PaulieScanlon / gatsby-browser.js
Created Jan 20, 2022
onRouteUpdate - jumplinks
View gatsby-browser.js
export const onRouteUpdate = ({ location }) => {
const jumplink = document.getElementById(location.hash)
if (jumplink) {
window.scrollTo({
top: jumplink.offsetTop,
})
}
return true
}
@PaulieScanlon
PaulieScanlon / hybrid-svg.js
Created Jan 13, 2022
A WIP hybrid Svg using Gatsby Image
View hybrid-svg.js
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
PaulieScanlon / use-local-storage.js
Last active Jan 1, 2022
Sync state to local storage so that it persists through a page refresh. Usage is similar to useState except we pass in a local storage key so that we can default to that value on page load instead of the specified initial value.
View use-local-storage.js
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
PaulieScanlon / test.js
Created Nov 23, 2021
client side data with fetch
View test.js
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
PaulieScanlon / main.js
Created Nov 16, 2021
Gatsby v2 + Storybook 5
View main.js
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
PaulieScanlon / Shopify Checkout
Last active Oct 27, 2021
A Shopify Checkout Example
View Shopify Checkout
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
PaulieScanlon / contentful-render.js
Created May 17, 2021
Contentful Render - Component
View contentful-render.js
import React from 'react';
const ContentfulRender = ({ children }) => {
return <>{process.env.GATSBY_CONTENTFUL_KEY ? <>{children}</> : null}</>;
};
export default ContentfulRender;
View Theme UI Animation Keyframes
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,
},