reecelucas’s gists

reecelucas / Tab.js

Last active December 3, 2021 09:50

React version of Heydon Pickering's "Tabbed Interface" inclusive component. https://inclusive-components.design/tabbed-interfaces/.

	import React, { useContext, useEffect, useRef } from 'react';
	import PropTypes from 'prop-types';
	import TabContext from './TabContext';
	import getAttributeProps from './getAttributeProps';

	const propTypes = {
	children: PropTypes.oneOfType([
	PropTypes.arrayOf(PropTypes.node),
	PropTypes.node
	]).isRequired,

reecelucas / details-dropdown.html

Last active April 11, 2019 16:47

Accessible dropdown menu using the `<details>` element. https://codepen.io/reecelucas/pen/QozpGw

reecelucas / useNetworkConnectivity.js

Last active April 2, 2019 16:31

Simple network connectivity hook

	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 / usePrevious.js

Last active March 30, 2020 18:06

React hook to get a previous prop/state value

	import { useEffect, useRef } from 'react';

	/**
	* Usage:
	* const [count, setCount] = useState(0);
	* const prevCount = usePrevious(count);
	*/
	export default value => {
	const ref = useRef();

reecelucas / useClickOutside.js

Last active April 2, 2019 16:32

React hook to detect when a click happens outside of a specified element

	import { useEffect } from 'react';

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

reecelucas / useScrollBlock.js

Last active December 17, 2024 13:11

React hook to enable/disable page scroll

	import { useRef } from 'react';

	const safeDocument = typeof document !== 'undefined' ? document : {};

	/**
	* Usage:
	* const [blockScroll, allowScroll] = useScrollBlock();
	*/
	export default () => {
	const scrollBlocked = useRef();

reecelucas / useScrollDirection.js

Last active September 8, 2021 20:07

React hook to detect scroll direction, based on the API of https://github.com/dollarshaveclub/scrolldir

	const SCROLL_UP = "up";
	const SCROLL_DOWN = "down";

	const useScrollDirection = ({
	initialDirection,
	thresholdPixels,
	off
	} = {}) => {
	const [scrollDir, setScrollDir] = useState(initialDirection);

reecelucas / useProximity.js

Last active April 18, 2019 12:21

React hook to detect proximity to an element. https://codesandbox.io/embed/0qwjq74w0p.

	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;

reecelucas / useWebSocket.js

Last active April 17, 2020 09:05

React hook to provide a declarative wrapper around the WebSockets API

	import { useEffect, useRef } from 'react'

	const isFunction = fn => typeof fn === 'function';
	const connectionIsOpen = ws => ws && ws.readyState === WebSocket.OPEN;

	/**
	* Usage:
	* const { webSocket, sendMessage, closeConnection } = useWebSocket({
	* url: 'wss://echo.websocket.org/',
	* onOpen: useCallback(event => {

reecelucas / .babelrc

Created June 3, 2019 08:00

Webpack Config Starter

	<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>

Reece Lucas reecelucas