README.md

Gatsby Addons Utilities

animate

Allows the animation of any numeric value over a given duration, including custom easing.

Usage

import React, { useCallback, useState } from 'react'
import { easeInOutCubic } from '@superrb/gatsby-addons/src/utils/easing-functions'
import { animate } from '@superrb/gatsby-addons/utils'

const MyComponent = () => {
  const [value, setValue] = useState<number>(0)

  const handleClick = useCallback(() => {
    animate(0, 100, v => {
      setValue(v)
    }, 1000, easeInOutCubic)
  }, [setValue])

  return (
    <button onClick={handleClick}>{value}</button>
  )
}

animator

Uses IntersectionObserver to set classes on elements as they appear in the viewport. To be coupled with CSS animations.

import React from 'react'
import { animator } from '@superrb/gatsby-addons/utils'

// Component will recieve a class of `animated` when in the viewport
const MyComponent = (
  <div ref={animator}></div>
)

isExternalLink

Used to determine whether a given URL is internal or external

Usage

import { isExternalLink } from '@superrb/gatsby-addons/utils'

isExternalLink('https://superrb.com') // true
isExternalLink('/home')               // false

extendClass

Used within wrapper components to extend a provided className for BEM-compatible child components

Usage

import { extendClass } from '@superrb/gatsby-addons/utils'

const className = extendClass('header', 'item') // Returns a BEM-compatible class name of `header__item`

getYPos

Get the pixel distance of an element from the top of the document

Usage

import { getYPos } from '@superrb/gatsby-addons/utils'

getYPos(document.getElementById('#content'))

isExternalLink

Compares a given URL with the current hostname to check if link is to an external site or not

Usage

import { isExternalLink } from '@superrb/gatsby-addons/utils'

isExternalLink('https://google.com')  // true
isExternalLink('/test')               // false

storageFactory

A safe wrapper around browser storage, which creates its own in-memory store if the requested storage is unavailable (for example, if user has blocked cookies in Safari, which causes accessing localStorage and sessionStorage to throw a fatal error when accessed)

Usage

import { storageFactory } from '@superrb/gatsby-addons/utils'

const session = storageFactory(() => sessionStorage)

session.setItem('test', 'test')

Addons comes with built-in wrappers for sessionStorage and localStorage.

import { session } from '@superrb/gatsby-addons/storage'

session.getItem('testing') // No longer throws an error if access to sessionStorage is blocked, and just stores data in memory