Moses Gunesch mosesoak

## hideOutlineStyle-example.ts
// the hook also provides a style object for convenience
const { hideOutlineStyle } = useTabOutline();

// the `style` prop is used here for easy manipulation
<div className="contact-form-checkbox" style={hideOutlineStyle} />

// the object is always defined, so spreading is always safe
<div
  style={{
    ...hideOutlineStyle,

## hideOutline-example.ts
// get the state from the hook
const { hideOutline } = useTabOutline();

// in one case this was used in a render like so:
<span
  className={classnames({
    highlighted,
    checkmark: true,
    'hide-outline': hideOutline,
  })}

## useTabOutline.ts
import { useEffect, useState } from 'react';

/**
 * Workaround for outlines that flash or stick on click.
 *
 * In general, never globally disable the `outline` attribute for
 * accessibility (a11y) reasons, but this can cause visual glitches
 * when using a mouse.
 *
 * This hook provides two ways to automate hiding an element's outline

## gatsby-ssr.js
exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  const headComponents = getHeadComponents();

  // Show a blocking message on MSIE
  // (documentMode is an IE-only property, versions 8-11)
  // (dangerouslySetInnerHTML keeps the script string unescaped)
  headComponents.push(
    <script
      key="block-msie"
      type="text/javascript"

## msie-blocker-script.html
<head>
  <script type="text/javascript">
    // Show a blocking message on MSIE
    // (documentMode is an IE-only property, versions 8-11)
    if (typeof window !== 'undefined' && window.document.documentMode) {
      window.onload = function () {
        document.body.innerHTML =
          'Internet Explorer is no longer supported.<br /><br />Please visit this site on Edge or Chrome.';
        document.body.style.cssText =
          'text-align: center; padding-top: 40vh; font-family: Sans-Serif;';

## Lodash deep merge with unique-value arrays
// Deep-merges arrays without duplicate values
const mergeCustomizer = (objValue: any, srcValue: any) => {
  if (Array.isArray(objValue) && Array.isArray(srcValue)) {
    return uniqWith(
      [...srcValue, ...objValue],
      (a, b) => a === b || isEqual(a, b),
    );
  }
};

## AnimatedNode_-tag.jsx
<AnimatedNode_
  animatedStyle='headerHeight'
>
  <Animated.View .../>
</AnimatedNode_>

## Conductor_-tag.jsx
<Conductor_
  animatedStyles={{
    headerHeight: this.headerHeightStyle,
  }}
>
  <YourComponent />
</Conductor_>
	// the hook also provides a style object for convenience
	const { hideOutlineStyle } = useTabOutline();

	// the `style` prop is used here for easy manipulation
	<div className="contact-form-checkbox" style={hideOutlineStyle} />

	// the object is always defined, so spreading is always safe
	<div
	style={{
	...hideOutlineStyle,
	// get the state from the hook
	const { hideOutline } = useTabOutline();

	// in one case this was used in a render like so:
	<span
	className={classnames({
	highlighted,
	checkmark: true,
	'hide-outline': hideOutline,
	})}
	import { useEffect, useState } from 'react';

	/**
	* Workaround for outlines that flash or stick on click.
	*
	* In general, never globally disable the `outline` attribute for
	* accessibility (a11y) reasons, but this can cause visual glitches
	* when using a mouse.
	*
	* This hook provides two ways to automate hiding an element's outline
	exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
	const headComponents = getHeadComponents();

	// Show a blocking message on MSIE
	// (documentMode is an IE-only property, versions 8-11)
	// (dangerouslySetInnerHTML keeps the script string unescaped)
	headComponents.push(
	<script
	key="block-msie"
	type="text/javascript"
	<head>
	<script type="text/javascript">
	// Show a blocking message on MSIE
	// (documentMode is an IE-only property, versions 8-11)
	if (typeof window !== 'undefined' && window.document.documentMode) {
	window.onload = function () {
	document.body.innerHTML =
	'Internet Explorer is no longer supported.<br /><br />Please visit this site on Edge or Chrome.';
	document.body.style.cssText =
	'text-align: center; padding-top: 40vh; font-family: Sans-Serif;';
	// Deep-merges arrays without duplicate values
	const mergeCustomizer = (objValue: any, srcValue: any) => {
	if (Array.isArray(objValue) && Array.isArray(srcValue)) {
	return uniqWith(
	[...srcValue, ...objValue],
	(a, b) => a === b \|\| isEqual(a, b),
	);
	}
	};
	<AnimatedNode_
	animatedStyle='headerHeight'
	>
	<Animated.View .../>
	</AnimatedNode_>
	<Conductor_
	animatedStyles={{
	headerHeight: this.headerHeightStyle,
	}}
	>
	<YourComponent />
	</Conductor_>