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 / README.md
Last active Nov 18, 2019
React - Error Boundary strategy
View README.md

One cool feature of React which isn't highlighted that often are "error boundaries".

Error boundaries can catch errors which are thrown inside your component during a lifecycle. You can use them in very fine-granular levels wrapping very small components (but I rarely see this) or you can wrap your whole app and show some fallback content, if an error happens. But you can also wrap something in between those extrem ranges and add a proper reset. Also it's not a hidden secret how to do that I haven't see a lot of people talking about that. So here is a small example which use react-router-dom to do that. You can see the complete example here.

Let's imagine you have the following app:

import * as React from 'react';
import { render } from 'react-dom';
import { Link, BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
@donaldpipowitch
donaldpipowitch / example.tsx
Created Nov 6, 2019
Mock Upload Progress with axios-mock-adapter
View example.tsx
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
const mock = new MockAdapter(axios);
// this mocks a request which is always at 40% progress
mock.onPost('/upload-1').reply((config) => {
const total = 1024; // mocked file size
const progress = 0.4;
if (config.onUploadProgress) {
@donaldpipowitch
donaldpipowitch / README.md
Last active Oct 24, 2019
Use GitLab Pages to deploy a Storybook per branch
View README.md

It's quite straightforward to use GitLab Pages to deploy a Storybook instance per branch (and remove it whenever the branch will be removed). And yeah, it's irony to document this in a GitHub Gist 😅

You just need a .gitlab-ci.yml like this one:

stages:
  - setup
  - build-and-test
  - deployment
  - pages
@donaldpipowitch
donaldpipowitch / README.md
Last active Oct 22, 2019
Example for a codemod which can run on a TypeScript code base
View README.md

Install @codemod/cli globally:

$ npm install -g @codemod/cli
# or
$ yarn global add @codemod/cli

This package works out of the box with most code bases, because it comes bundled with @babel/preset-env and @babel/preset-typescript. If you need other presets or plugins for parsing your source code you can use a custom Babel config as well. Note that the codemod will not apply the transformations from these presets and plugins - they are only used for parsing. Therefor you keep your TypeScript types in your source code for example. Formatting will be kept the same as much as possible.

@donaldpipowitch
donaldpipowitch / README.md
Created Oct 8, 2019
A React hook to create Axios Mocks
View README.md

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
donaldpipowitch / data.json
Last active Oct 4, 2019
Country code to Country name in JSON
View data.json
// from https://en.wikipedia.org/wiki/ISO_3166-2#cite_note-iso31661-2, 4th Oct. 2019
[
{
"code": "AD",
"name": "Andorra"
},
{
"code": "AE",
"name": "United Arab Emirates"
},
@donaldpipowitch
donaldpipowitch / README.md
Last active Oct 14, 2019
Handle server errors in Formik
View README.md

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
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
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);
You can’t perform that action at this time.