hamzakaya

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

hamzakaya

export class Component {
    constructor( props = {}) {
        this.props = props;
        this.state = null;
    }

    setState(nextState) {
        const isCompat = isObject(this.state) && isObject(nextState);
        const commitState = ()=> this.state = isCompat? Object.assign({}, this.state, nextState) : nextState;
        const prevState = isObject(this.state)? Object.assign({}, this.state) : this.state;

hamzakaya

function objSet(source, keys, update) {
  keys.split && (keys = keys.split('.'));

  let next = copy(source),
    last = next,
    i = 0,
    l = keys.length;

  for (; i < l; i++) {
    last = last[keys[i]] =

hamzakaya

function limitArray(length: number): any[] {
  const arr = new Array()
  arr.push = function () {
    if (this.length >= length) this.shift()
    return Array.prototype.push.apply(this, arguments)
  }

  return arr
}

hamzakaya

class AsycLoader {
  constructor() {}

  loadScript = (src) => {
    var script = document.createElement('script')
    script.async = true
    script.src = src
    document.getElementsByTagName('body')[0].appendChild(script)
    return new Promise<void>((res, rej) => {
      script.onload = function () {

hamzakaya

import { useState } from 'react';

export function useListState<T>(initialValue: T[] = []) {
  const [state, setState] = useState(initialValue);

  const append = (...items: T[]) => setState((current) => [...current, ...items]);
  const prepend = (...items: T[]) => setState((current) => [...items, ...current]);

  const insert = (index: number, ...items: T[]) =>
    setState((current) => [...current.slice(0, index), ...items, ...current.slice(index)]);

hamzakaya

import { useEffect, useRef } from 'react';

const DEFAULT_EVENTS = ['mousedown', 'touchstart'];

export function useClickOutside<T extends HTMLElement = any>(
  handler: () => void,
  events?: string[] | null,
  nodes?: HTMLElement[]
) {
  const ref = useRef<T>();

hamzakaya

import { useState } from 'react';

export function useClipboard({ timeout = 2000 } = {}) {
  const [error, setError] = useState<Error>(null);
  const [copied, setCopied] = useState(false);
  const [copyTimeout, setCopyTimeout] = useState(null);

  const handleCopyResult = (value: boolean) => {
    clearTimeout(copyTimeout);
    setCopyTimeout(setTimeout(() => setCopied(false), timeout));

hamzakaya

import { useEffect, useState, useRef } from 'react';

export function useDebouncedValue<T = any>(value: T, wait: number, options = { leading: false }) {
  const [_value, setValue] = useState(value);
  const mountedRef = useRef(false);
  const timeoutRef = useRef<number>(null);
  const cooldownRef = useRef(false);

  const cancel = () => window.clearTimeout(timeoutRef.current);

hamzakaya

import { useReducer } from 'react';

const reducer = (value: number) => (value + 1) % 1000000;

export function useForceUpdate(): () => void {
  const [, update] = useReducer(reducer, 0);
  return update;
}