reecelucas

/**
 * @param {String} email
 * @return {Boolean}
 */
const validateEmail = email => {
    const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return emailRegex.test(email);
};

reecelucas

/**
 * @param {String} key
 * @param {Any} value
 * @param {Number} expirationDays
 * @returns {void}
 */
export const saveToLocalStorage = ({ key, value, expirationDays }) => {
    // Try for localStorage support...
    try {
        // Convert days to milliseconds (ms)

reecelucas

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker
            .register('path/to/service-worker.js')
            .then(registration => {
                console.log('SW registered: ', registration);
            })
            .catch(registrationError => {
                console.log('SW registration failed: ', registrationError);
            });

reecelucas

const config = {
  selector: '[data-observe]',
  isVisibleClass: 'is-visible',
  observerOptions: {
    threshold: 0,
    rootId: null,
    rootMargin: '0px 0px 0px 0px',
    once: true
  }
};

reecelucas

const config = {
  accordionSelector: "[data-accordion]",
  headingSelector: "[data-accordion-heading]",
  buttonSelector: "[data-accordion-button]"
};

const setup = accordion => {
  const headings = [...accordion.querySelectorAll(config.headingSelector)];

  if (!headings || headings.length === 0) return;

reecelucas

const form = document.querySelector('form');
const config = {
  errorAttribute: 'aria-invalid',
  errorClass: 'error'
};

// Helpers
const isFormInput = target => {
  const { nodeName } = target;

reecelucas

import { useState, useEffect } from 'react';

/**
 * navigator.onLine behaves a little differently across browsers
 * (https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine#Specification).
 * For bullet-proof detection you can add to this hook using some of the suggestions
 * mentioned here https://www.html5rocks.com/en/mobile/workingoffthegrid/.
 *
 * Usage:
 * const isOnline = useNetworkConnectivity();

reecelucas

import { useEffect } from 'react';

/**
 * Usage:
 * useClickOutside(myRef, event => {
 *   console.log(`${event.target} is outside of ${myRef.current}`);
 * });
 */
export default (elemRef, fn) => {
  useEffect(() => {

reecelucas

<details class="c-menu" data-js-menu>
  <summary id="menu-control" class="c-menu__control" data-js-menu-control>
    Actions
  </summary>
  <ul id="menu" class="c-menu__list" data-js-menu-list>
    <li>
      <a href="#dowload">Download</a>
    </li>
    <li>
      <a href="#copy">Copy to Clipboard</a>

reecelucas

import { useEffect, useState } from "react";

const useProximity = (elemRef, perimeter = 100) => {
  const [withinPerimeter, setWithinPerimeter] = useState(false);

  useEffect(() => {
    if (!elemRef || !elemRef.current) return;

    let ticking = false;
    const { current } = elemRef;