finom

import React, {
  createContext,
  useState,
  useContext,
  ReactNode,
  FunctionComponent,
  Dispatch,
  SetStateAction,
} from 'react';

finom

import { NextRequest, NextResponse } from 'next/server';
import { checkAuth } from './checkAuth'; // define it by yourself

const httpMethods = ['GET', 'POST', 'PUT', 'DELETE'] as const;

type MethodMap<T> = { GET?: T; POST?: T; PUT?: T; DELETE?: T };

export default function authGuard(options?: MethodMap<boolean>) {
  return function AuthGuard(given: Function) {
    const ctr = given as Omit<Function, 'prototype'> & {

finom

import { useEffect, useRef } from 'react';

/**
 *
 * @example
 * const ref = useClickOutside<HTMLDivElement>((evt: MouseEvent) => console.log('blah'))
 * <div ref={ref} />
 */

type ClickEvent = MouseEvent & { target: HTMLElement };

finom

import { useEffect } from 'react';

interface Props {
  selector: string;
  className?: string;
  onClick: (evt: Event) => void;
}

const QuerySelector = ({
  selector,

finom

import { TouchableOpacity, TouchableNativeFeedback, Platform } from 'react-native';
import { createElement } from 'react';

// use TouchableNativeFeedback for android and TouchableOpacity for ios
// use TouchableOpacity with activeOpacity=1 for both platforms if disabled=true
const Touchable = ({
  disabled,
  onPress,
  ...props
}) => {

finom

/*
  A hook for creating observable-like immutable arrays based on useState
  in other words allows to call push, pull, slice... methods which are going to deliver
  a new array every time and trigger component to re-render

  Usage:
  const [array, arrayRef] = useArrayState(initialValue = []);

  arrayRef.push(foo); // triggers component to re-render and makes 'array' to update

finom

/*
  Usage:
  const [value, setTrue, setFalse] = useBooleanState(initialValue);
*/

import { useState, useCallback } from "react";

export default function useBooleanState(initialValue) {
    const [value, onSetValue] = useState(initialValue);
    const onSetTrue = useCallback(() => onSetValue(true), []);

finom

( function( win, doc, s_add, s_rem ) {
	if( doc[s_add] ) return;
	Element.prototype[ s_add ] = win[ s_add ] = doc[ s_add ] = function( on, fn, self ) {
		return (self = this).attachEvent( 'on' + on, function(e){
			var e = e || win.event;
			e.target = e.target || e.srcElement;
			e.preventDefault  = e.preventDefault  || function(){e.returnValue = false};
			e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true};
			e.which = e.button ? ( e.button === 2 ? 3 : e.button === 4 ? 2 : e.button ) : e.keyCode;
			fn.call(self, e);

finom

/*
  Can be used to achieve useState hook experience with React Context API
  1. Create context with some initial state:
  const MyContext = createStateContext(0);
  2. Wrap your component by the context provider
  <MyContext.Provider>
    <MyComponent />
  </MyContext.Provider>
  3. Use it in your components with built-in react useContext hook:
  import { useContext } from 'react';

finom

/*
  Usage:
  const [forceIndex, forceUpdate] = useForceUpdate();
  
  // call forceUpdate() when component needs to be updated
  // use forceIndex as key to force re-render child components
  
  Important! This function is most likely an antipattern! But sometimes I can be super useful:
  it can re-render react native screens when something gone wrong and user is prompted by a "Try again" button. 
*/