This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
A bit of syntax sugar over context providers. Allows to turn code like this: | |
<SomeProvider1> | |
<SomeProvider2> | |
<SomeProvider3> | |
<MyComponent /> | |
</SomeProvider3> | |
</SomeProvider2> | |
</SomeProvider1> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Usage: | |
usePromiseEffect(async => () => { | |
await fetch(foo); | |
// ... | |
}) | |
*/ | |
import { useEffect } from 'react'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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. | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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), []); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect } from 'react'; | |
interface Props { | |
selector: string; | |
className?: string; | |
onClick: (evt: Event) => void; | |
} | |
const QuerySelector = ({ | |
selector, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect, useRef } from 'react'; | |
/** | |
* | |
* @example | |
* const ref = useClickOutside<HTMLDivElement>((evt: MouseEvent) => console.log('blah')) | |
* <div ref={ref} /> | |
*/ | |
type ClickEvent = MouseEvent & { target: HTMLElement }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'> & { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { | |
createContext, | |
useState, | |
useContext, | |
ReactNode, | |
FunctionComponent, | |
Dispatch, | |
SetStateAction, | |
} from 'react'; |
OlderNewer