Skip to content

Instantly share code, notes, and snippets.

Donald Pipowitch donaldpipowitch

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 May 31, 2020
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 / 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 (
@donaldpipowitch
donaldpipowitch / usePrevious.ts
Created Jun 14, 2019
React Hook to use previous value
View usePrevious.ts
import { useEffect, useRef } from 'react';
function usePrevious<T>(value: T) {
const ref = useRef<T>();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
You can’t perform that action at this time.