ToolKitt

Higher order components and helper functions for aiding in user interface development.

View demo

yarn add toolkitt

npm install toolkitt --save

Tools

Grid Overlay

Customizable overlay grid for aligning elements.

To use as a component:

import GridOverlay from 'toolkitt/GridOverlay'

const divStyle = {
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  height: 320,
  backgroundColor: '#f0f0f0',
}

export default () => (
  <div style={boxStyle}>
    <GridOverlay
      colorOuter={'green'}
      hasInner={false}
      size={10}
    />
  </div>
  )

To use as a higher order component:

import withGridOverlay from 'toolkitt/withGridOverlay'
import Component from './Component'

const ComponentWithGrid = withGridOverlay(Component)

export default () => (
  <div>
    <ComponentWithGrid
      colorOuter={'green'}
      hasInner={false}
      size={10}
    />
  </div>
)

Options and defaults:

type withGridOverlay = {
  colorOuter: string,   // rgba(255, 0, 255, 1.0)
  colorInner: string,   // rgba(255, 0, 255, 0.5)
  dashOuter: string,    // '' (solid line)
  dashInner: string,    // '2, 2'
  hasInner: boolean,    // true
  isDisabled: boolean,  // false
  opacity: number,      // 0.2
  size: number,         // 16,
  strokeWidth: number,  // 1,
}

Grid Overlay with Keyboard toggles

Wraps the GridOverlay with hot keys for cycling and toggling the overlay.

To use as a component:

import GridOverlayWithKeyboard from 'toolkitt/GridOverlayWithKeyboard'

const devToolStyle = {
  position: 'fixed',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  zIndex: 3000,
  pointerEvents: 'none',
}

export default () => (
  <div style={devToolStyle}>
    <GridOverlayWithKeyboard
      cycleKey="~"
      opacity={0.1}
      size={40}
      toggleKey="\`"
    />
  </div>
)

To use as a higher order component:

import withGridOverlay from 'toolkitt/withGridOverlay'
import withGridKeyboard from 'toolkitt/withGridKeyboard'
import Component from './Component'

const ComponentWithKeyboardGrid = withGridOverlay(withGridKeyboard(Component))

export default () => (
  <div>
    <ComponentWithKeyboardGrid
      cycleKey="~"
      opacity={0.1}
      size={40}
      toggleKey="\`"
    />
  </div>
)

Options and defaults:

type withGridKeyboard = {
  cycleGridOverlay?: () => {} | null,
  cycleKey?: string | null,
  toggleGridOverlay?: () => {} | null,
  toggleKey?: string | null,
}

What updated?

Helper function for tracking which keys change between two objects.

import whatUpdated from 'toolkitt/whatUpdated'

const thisProps = { a: 1, b: 2, c: 3 }
const nextProps = { a: 3, b: 2, c: 1 }

whatUpdated(thisProps, nextProps)
// outputs [a, c]

:rocket::rocket: