madflanderz

import { useState, useEffect } from 'react'

const useDebounce = (fn: () => any, ms: number = 0, args: any[] = []) => {
  const [timeout, setTimeoutVar] = useState<any>(null)
  const [isStart, setStart] = useState(true)

  useEffect(() => {
    // don't start interval when executed first time
    if (isStart) {
      setStart(false)

madflanderz

import { useState, Dispatch, SetStateAction, useEffect } from "react"
/**
 * useDebouncedState can be used to debounce value updates for given delay.
 *
 * Example Usecase: You have a search field and want to load sugestions.
 * Api should only be called when last user interaction is minimum 300ms ago.
 *
 * Usage: debouncedValue is updated after 500 ms
 * const [value, debouncedValue, setValue] = useDebouncedState("", 500)
 */

madflanderz

import { useRef } from 'react'

function useValueChanged<T>(callback: (value: T) => void, value: T) {
  // save initial value on first call
  const ref = useRef(value)

  // execute callback when value has changed
  if (ref.current !== value) {
    ref.current = value
    callback(value)

madflanderz

import * as React from 'react'
import { Theme } from '@material-ui/core/styles'
import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles(({ palette }: Theme) => ({
  root: {
    // backgroundColor: palette.primary,
  },
}),
  { name: 'MyComponent' }                            

madflanderz

import { useQuery, QueryHookOptions } from 'react-apollo-hooks'

function useSmartQuery<S, T>(query: any, options?: QueryHookOptions<T>) {
  return useQuery<S>(query, {
    fetchPolicy: 'cache-and-network',
    ...options,
  })
}

export default useSmartQuery

madflanderz

window.makeSnippet = (code, prefix="ccc", componentName="MyComnponent") => {
    console.log('makeSnippet()', code)

    code = code.replace(new RegExp(componentName, 'g'), '$TM_FILENAME_BASE')

    console.log('componentName: ', componentName)

    const lines = code.split('\n')
    console.log(lines)

madflanderz

import React from 'react'

interface Props {
  title: string
}

const StatusIcon = ({ title }: Props) => (
  <div>

  </div>

madflanderz

import React from 'react'
import { FormikValues, FormikErrors } from 'formik'

/** @private is the given object an Object? */
export const isObject = obj => obj !== null && typeof obj === 'object'

export function setNestedObjectValues(object, value, visited = new WeakMap(), response = {}) {
  for (let k of Object.keys(object)) {
    const val = object[k]
    if (isObject(val)) {

madflanderz

// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
	var elements = document.body.getElementsByTagName('*');
	var items = [];
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
			items.push(elements[i]);
		}
	}

madflanderz

const food = ['apple', 'banana', 'cookie'] as const

// 'apple', 'banana', 'cookie'
type Food = typeof food[number]