Notes

Some stuff I done learned. Click on a note to read more.

Fix styled-components withComponent Method

styled-components have deprecated the withComponent method in favour of the inline as prop. Unfortunately, @types/styled-components says you should use withComponent method and not the as prop.

Ouch!

Here’s a higher-order component you can use instead of either of them.

import styled, { StyledComponent }
from "styled-components"

function withComponent<
  C extends StyledComponent<any, any>,
  T extends React.ComponentType<any>
    | keyof JSX.IntrinsicElements
>(Component: C, type: T) {
  return styled((props =>
    <Component as={type} {...props} />)
     as unknown as T)``
}

// Example Usage:

const Link = withComponent(Button, 'a');

Haskell Quicksort in JavaScript

Haskell is a really neat language! In fact, you can implement quicksort in just one line.

While this is tremendously inefficient, I thought it would be fun to create a JS version of the one-liner, should I ever need it in an interview.

const quicksort = ([h, ...arr]) => [h, ...arr].length
  ? [ ...quicksort(arr.filter(a => h >= a)), h,
      ...quicksort(arr.filter(a => h < a)) ]
  : []

Fix styled-components withComponent Method

styled-components have deprecated the withComponent method in favour of the inline as prop. Unfortunately, @types/styled-components says you should use withComponent method and not the as prop.

Ouch!

Here’s a higher-order component you can use instead of either of them.

import styled, { StyledComponent }
from "styled-components"

function withComponent<
  C extends StyledComponent<any, any>,
  T extends React.ComponentType<any>
    | keyof JSX.IntrinsicElements
>(Component: C, type: T) {
  return styled((props =>
    <Component as={type} {...props} />)
     as unknown as T)``
}

// Example Usage:

const Link = withComponent(Button, 'a');

Haskell Quicksort in JavaScript

Haskell is a really neat language! In fact, you can implement quicksort in just one line.

While this is tremendously inefficient, I thought it would be fun to create a JS version of the one-liner, should I ever need it in an interview.

const quicksort = ([h, ...arr]) => [h, ...arr].length
  ? [ ...quicksort(arr.filter(a => h >= a)), h,
      ...quicksort(arr.filter(a => h < a)) ]
  : []