donaldpipowitch

function useScrollBottom<T extends HTMLElement>(offset?: number) {
  const [atBottom, setAtBottom] = useState(false);
  const scrollEl = useRef<T>(null);

  useEffect(() => {
    const { current } = scrollEl;
    if (current) {
      // by default we take the clientHeight into account, so "bottom" begins as soon as the last
      // visible piece appears in the scrollable area
      const withOffset = offset === undefined ? current.clientHeight : offset;

donaldpipowitch

import { useEffect, useRef } from 'react';

function usePrevious<T>(value: T) {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

donaldpipowitch

import React, { createContext, useState, useContext, FC } from 'react';

type ContextValue = [boolean, (value: boolean) => void] | undefined;
const FullwidthContext = createContext<ContextValue>(undefined);

const defaultState = false;

export const FullwidthProvider: FC = ({ children }) => {
  const state = useState(defaultState);
  return (

donaldpipowitch

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpErrorResponse,
  HttpClient
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';

donaldpipowitch

this.http.get<Data1>(url1).pipe(
  mergeMap((data1) =>
    this.http.get<Data2>(url2).pipe(map((_data2) => data1))
  )
);

donaldpipowitch

const puppeteer = require('puppeteer');
const chalk = require('chalk');

const { green, red, cyan, grey, bold } = chalk;

// we assume storybook can visited at http://localhost:9001
const url = 'http://localhost:9001/iframe.html';

const runAxe = () =>
  new Promise((resolve, reject) =>

donaldpipowitch

import {
  Directive,
  Input,
  Output,
  EventEmitter,
  ElementRef,
  OnDestroy
} from '@angular/core';

@Directive({

donaldpipowitch

div [my-focusout-outside]="shouldTrack" (focusoutOutside)="doSomething()">Hello</div>

donaldpipowitch

React

index.tsx:

import React from 'react';
import styled from 'styled-components';
 
enum Area {
  header = 'header',

donaldpipowitch

import React, { createContext, useContext, useMemo, FC } from 'react';
import { useMedia } from 'use-media';

enum Breakpoints {
  small = 'min-width: 768px',
  medium = 'min-width: 992px',
  large = 'min-width: 1200px'
}

type BreakpointsContextValue = {