This file contains hidden or 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 { useState, useCallback } from "react"; | |
export function useSubmit(fun: Function): [Function, boolean] { | |
const [pending, setPending] = useState<boolean>(false); | |
const submit = useCallback( | |
(...args) => { | |
if (pending) return; | |
const res = fun.apply(this, args); |
This file contains hidden or 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
const fetchMachine = Machine({ | |
id: "infinite-scroll", | |
initial: "idle", | |
context: { | |
page: 1, | |
size: 2, | |
total: 0, | |
keyword: "", | |
items: [] | |
}, |
This file contains hidden or 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
const fetchMachine = Machine({ | |
id: 'infinite scroll', | |
initial: 'idle', | |
context: { | |
page: 0, | |
size: 25 | |
}, | |
states: { | |
idle: { | |
on: { |
This file contains hidden or 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 { useMemo, useState } from 'react' | |
export const useHover = () => { | |
const [isHovered, setIsHovered] = useState(false) | |
const binds = useMemo( | |
() => ({ | |
onMouseEnter: () => setIsHovered(true), | |
onMouseLeave: () => setIsHovered(false) | |
}), |
This file contains hidden or 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
const Demo = () => { | |
const ref = React.useRef(null); | |
useOnScrollBottom(() => console.log("ON SCROLL BOTTOM"), 20); // based on window | |
useOnScrollBottom(() => console.log("ON SCROLL BOTTOM INSIDE"), 20, ref); // based on ref | |
... | |
} |
This file contains hidden or 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 { useMemo, useCallback, useReducer as useReducerBase } from "react"; | |
export function useCombineReducer(initialState, ...reducers) { | |
const internalReducer = useCallback( | |
(state, action) => ({ | |
...state, | |
...reducers.reduce( | |
(prev, current, idx) => | |
idx === 0 | |
? current(state, action, initialState) |
This file contains hidden or 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 { useMemo, useEffect } from 'react' | |
import { getIn, connect } from 'formik' | |
import { useThrottle } from './useThrottle' | |
export const FormikFieldSpy = connect( | |
({ field, onChange, timeout, formik }) => { | |
const value = useMemo(() => getIn(formik.values, field), [ | |
field, |
This file contains hidden or 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 { useReducer as useReducerBase } from 'react' | |
export const useReducer = (reducer, initialState) => { | |
const [state, dispatch] = useReducerBase(reducer, initialState) | |
const customDispatch = (type, payload) => dispatch({ type, payload }) | |
return [state, customDispatch, dispatch] | |
} |
This file contains hidden or 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 from 'react' | |
import { useT } from './hook.js' | |
const Comp = () => { | |
const { t, tDate, tTime, tDateTime, tCurrency } = useT() | |
const myDate = '1993-05-07T17:30:00z' | |
const myCurrency = 100 | |
This file contains hidden or 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 * as R from 'ramda' | |
const valid = (message, isValid) => message ? (isValid ? null : message) : isValid | |
const emailRegex = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/ | |
export const isEmail = (value, message) => valid(message, emailRegex.test(value)) | |
export const isNumber = (value, message) => valid(message, /^\d+$/.test(value)) | |
export const required = (value, message) => valid(message, !!value && value.trim() !== '') | |
export const min = (value, minimum, message) => valid(message, value.length >= minimum) | |
export const max = (value, maximum, message) => valid(message, value.length <= maximum) |