Alexandre-Herve

// Tweaked from https://gist.github.com/denisborovikov/3e6e772d9d1897c150639872467d214f

const routes = {
  home: '/',
  transactions: '/transactions',
  transactionDetails: '/transactions/:uuid/:optional?',
  transfer: '/transfer/:type(bank|card)?/:id?'
} as const // prevents Typescript from widening the path types to string.

type Routes = typeof routes;

bvaughn

const createLogger = (backgroundColor, color) => {
  const logger = (message, ...args) => {
    if (logger.enabled === false) {
      return;
    }

    console.groupCollapsed(
      `%c${message}`,
      `background-color: ${backgroundColor}; color: ${color}; padding: 2px 4px;`,
      ...args

kentcdodds

// handy method to create a Higher Order Component out of a
// Render Prop Component (like a Context.Consumer).
// handles, statics, displayName, refs, and value forwarding

function createHOCFromRenderProp({prop, Consumer}) {
  return Component => {
    function Wrapper(props, ref) {
      return (
        <Consumer>
          {value => <Component {...{...props, [prop]: value, ref}} />}

istarkov

How to style React components

If you use sass and css-modules and want to restyle some base component without changing its code. (base component already use css-modules and exposes styles property)

I know two way how to do it.

1. Using composes css-modules operator. Just extend classes you need, then in javascript code combine both styles as {...baseStyle, ...myStyleSimple}