Skip to content

Instantly share code, notes, and snippets.

Donald Pipowitch donaldpipowitch

Block or report user

Report or block donaldpipowitch

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@donaldpipowitch
donaldpipowitch / my-component.tsx
Created Sep 12, 2019
Children.map with unwrapping/flattening Fragments in React
View my-component.tsx
import React, { FC, Children, ReactNode } from 'react';
import { isFragment } from 'react-is';
import styled from 'styled-components';
const SomeContainer = styled.div`
/* add some styling */
`;
const WrappedItem = styled.div`
/* add some styling */
@donaldpipowitch
donaldpipowitch / use-match-media.tsx
Last active Sep 11, 2019
useMatchMedia - a React hook for matchMedia / media queries
View use-match-media.tsx
import { useState, useEffect } from 'react';
// pass a query like `(min-width: 768px)`
export function useMatchMedia(query: string) {
const [matches, setMatches] = useState(() => matchMedia(query).matches);
useEffect(() => {
const mediaQueryList = matchMedia(query);
const onChange = (event: MediaQueryListEvent) => setMatches(event.matches);
@donaldpipowitch
donaldpipowitch / use-breakpoints.tsx
Created Sep 11, 2019
useBreakpoints hook for React
View use-breakpoints.tsx
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 = {
@donaldpipowitch
donaldpipowitch / README.md
Created Sep 6, 2019
Small example to showcase differences a CSS-in-JS solution in React can offer vs. styling in Angular
View README.md

React

index.tsx:

import React from 'react';
import styled from 'styled-components';
 
enum Area {
  header = 'header',
@donaldpipowitch
donaldpipowitch / example.html
Last active Sep 5, 2019
Angular directive to (conditionally) track focusout outside of an element (children are ignored)
View example.html
div [my-focusout-outside]="shouldTrack" (focusoutOutside)="doSomething()">Hello</div>
@donaldpipowitch
donaldpipowitch / click-outside.directive.ts
Created Sep 5, 2019
Angular directive to (conditionally) track clicks outside of an element
View click-outside.directive.ts
import {
Directive,
Input,
Output,
EventEmitter,
ElementRef,
OnDestroy
} from '@angular/core';
@Directive({
@donaldpipowitch
donaldpipowitch / axe.js
Created Nov 26, 2018
aXe based a11y checks in your CI for Storybook
View axe.js
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
donaldpipowitch / file.ts
Created Aug 21, 2019
Subsequent requests with RxJS (and Angular), but using the first response
View file.ts
this.http.get<Data1>(url1).pipe(
mergeMap((data1) =>
this.http.get<Data2>(url2).pipe(map((_data2) => data1))
)
);
@donaldpipowitch
donaldpipowitch / interceptor.ts
Created Aug 21, 2019
Try to refresh token once on 401 with RxJS and Angular Http Interceptor
View interceptor.ts
import { Injectable } from '@angular/core';
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
HttpErrorResponse,
HttpClient
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
@donaldpipowitch
donaldpipowitch / example.ts
Created Jul 25, 2019
Share useState with useContext
View example.ts
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 (
You can’t perform that action at this time.