srph

import { useState, useRef } from 'react'
import useUpdateEffect from 'react-use/lib/useUpdateEffect'

interface Props {
  timeout: number
}

type Payload = [boolean, () => void]

function useBufferState(props: Props): Payload {

srph

Use-case

This is particularly useful if you have to attach to a document event (in my case, a keyboard event). Unless you re-attach the event whenever anything changes, you will have stale props. Now, we don't want that, do we?

In my case, I had a hook which accepted this argument:

interface Props {
  isDisabled: () => boolean
  onToggleChat: () => void
 onToggleMute: () => void

srph

import { useEffect } from 'react'
import useWindowSize from 'react-use/lib/useWindowSize'


/**
 * @NOTE Don't mount this twice; only on the root node.
 */
function WindowVhSetter() {
  const {height} = useWindowSize()

srph

import './style.css'
import * as React from 'react'

export type Props = React.ImgHTMLAttributes<HTMLImageElement> & {
  ratio: number
}

function ImageAspectRatio(props: Props) {
  const { ratio, ...imgProps } = props

srph

import { format } from 'date-fns'

/**
 * Gives you a mysql standard formatted datetime
 * e.g., 2018-08-08 23:00:00
 */
function getStandardFormattedDateTime(date: Date = new Date()) {
  return format(date, 'YYYY-MM-DD HH-mm-ss')
}

srph

interface AppPartyLog {
  id: number
  party_id: number
  type: 'activity' | 'message'
  activity?: {
    id: string
    text: string
    user: AppUser
  }
  message?: {

srph

/**
 * Little trick to force our component to remount entirely if the user
 * creates a tracker all while viewing another tracker.
 */
function WrappedDashboardTracker(props: Props) {
  return (
    <DashboardTracker key={props.match.params.trackerId} {...props} />
  )
}

srph

import * as React from 'react'

interface Props {
  interval: number
  children: (now: Date) => React.ReactNode
}

interface State {
  now: Date
}

srph

function composeRefs<T>(refs: React.Ref<T>[]): React.Ref<T> {
  return function(component: T) {
    refs.forEach((ref) => {
      if (typeof ref === 'function') {
        ref(component)
      } else if (ref && 'current' in ref) {
        ref.current = component
      }
    })
  }

srph

interface RemainingTimeValue {
  hours: number
  minutes: number
  seconds: number
}

/**
 * Get remaining time from seconds
 * 
 * Used by `toReadableTime` and `distanceInWordsAbbreivated`