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 /
Created Oct 8, 2019
A React hook to create Axios Mocks

A simple hook which can be used to create Axios mock. The hook will throw an error if an unmocked route was found.

Works great in Storybook stories:

export const EmptyResult = () => {
  useMock((mock) => {
    const result = [];
    mock.onGet(searchUrl).reply(200, result);
donaldpipowitch / data.json
Last active Oct 4, 2019
Country code to Country name in JSON
View data.json
// from, 4th Oct. 2019
"code": "AD",
"name": "Andorra"
"code": "AE",
"name": "United Arab Emirates"
donaldpipowitch /
Last active Oct 14, 2019
Handle server errors in Formik

Whenever the server returns validation errors and we would set them with setFieldError they would be lost if any field would get a change or blur event. But we want to keep these kind of errors until the specific field changes. Additional we want to handle generic server errors (which are not specific to a field, but the whole form).

With these hooks field specific server side errors should be added like this:

const { setStatus } = useFormikContext();

const errors = {};
// adjust serverErrors to your own responses
// in this case they look like this: Array<{ name: string, error: string }>
donaldpipowitch / use-touched-handler.tsx
Created Oct 1, 2019
Change touch behavior of Formik
View use-touched-handler.tsx
import { useState, useEffect } from 'react';
import { useFormikContext, FieldMetaProps } from 'formik';
export function useTouchedHandler(name: string, meta: FieldMetaProps<any>) {
const { setFieldTouched } = useFormikContext<any>();
// use meta.touched as the initial value to keep the state,
// in case this field was unmounted
const [wasChanged, setWasChanged] = useState(meta.touched);
donaldpipowitch / my-component.tsx
Created Sep 12, 2019 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 / 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 / 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 /
Created Sep 6, 2019
Small example to showcase differences a CSS-in-JS solution in React can offer vs. styling in Angular



import React from 'react';
import styled from 'styled-components';
enum Area {
  header = 'header',
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 / click-outside.directive.ts
Created Sep 5, 2019
Angular directive to (conditionally) track clicks outside of an element
View click-outside.directive.ts
import {
} from '@angular/core';
You can’t perform that action at this time.