Skip to content

Instantly share code, notes, and snippets.

View js2me's full-sized avatar
🚙
I may be slow to respond.

Sergey S. Volkov js2me

🚙
I may be slow to respond.
View GitHub Profile
@js2me
js2me / use-async-effect.ts
Created November 3, 2022 13:51
use async effect
import { MutableRefObject, useEffect, useRef, useState } from "react";
type AsyncResult<T> = {
status: AsyncStatus;
data?: T;
error?: Error;
};
enum AsyncStatus {
Loading,
@js2me
js2me / global.css
Created October 16, 2022 15:38
fluid typography adaptive font size
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
@js2me
js2me / clamp.ts
Created December 22, 2021 11:47
clamp algorithm on typescript
export const clamp = (num: number, min: number, max: number): number =>
Math.max(min, Math.min(max, num))
@js2me
js2me / useConstants.ts
Created December 22, 2021 09:48
useConstant hook
import { useRef } from 'react'
/**
* Создает константное значение в функциональном React компоненте
* useMemo не дает гарантий, что функция определения значения не вызовется повторно
* https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
* https://reactjs.org/docs/hooks-reference.html#usememo
*
* @param defineValue функция определения значения
*/
@js2me
js2me / useSyncRef.ts
Created November 29, 2021 08:55
use sync ref
import { MutableRefObject, useEffect, useRef } from 'react'
export const useSyncRef = <T>(value: T): MutableRefObject<T> => {
const ref = useRef<T>(value)
useEffect(() => {
ref.current = value
}, [value])
return ref
@js2me
js2me / useSimpleReducer.ts
Created November 19, 2021 11:05
simple reducer for usage in React
/* eslint-disable @typescript-eslint/ban-types */
import { Reducer, useCallback, useReducer } from 'react'
import { useConstant } from 'hooks/useConstant'
const reducerCreator =
<S extends object>(filter?: (prev: S, curr: S) => boolean) =>
(state: S, update: (prevState: S) => S | void) => {
const nextState = update(state)
return nextState === void 0 || (filter && filter(state, nextState))
@js2me
js2me / random.ts
Created August 29, 2021 22:43
randoms ts
import * as getRandomWord from "random-words";
export const getRandomFloat = <T extends number = number>(min = 0, max = 1): T => {
return (Math.random() * (max - min) + min) as T;
};
export const getRandomInt = <T extends number = number>(min = 0, max = 1): T => {
if (min === max) return min as T;
return Math.round(getRandomFloat(min, max)) as T;
@js2me
js2me / status.ts
Created June 18, 2021 22:41
Effector status of effects
import {
Effect,
Store,
combine,
guard,
createEvent,
restore,
sample,
} from "effector";
import { status as patronumStatus } from "patronum";
@js2me
js2me / undoRedoEffector.ts
Created March 22, 2021 13:03
Undo redo effecto draft
import { combine, createEvent, createStore, Event, guard, sample, StoreValue } from "effector";
export const createUndoRedo = <S extends unknown>({ defaultState, filter, limit, name }: UndoRedoOptions<S>) => {
const storeName = name || "unknown-store";
const $present = createStore(defaultState, { name: `history/${storeName}/present` });
const limitPerTime = Math.round(limit / 2);
const $past = createStore<S[]>([], { name: `history/${storeName}/past` });
const $future = createStore<S[]>([], { name: `history/${storeName}/future` });
@js2me
js2me / launch.json
Last active February 16, 2021 17:24
ts-node debugger for vs code
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
// https://github.com/wclr/ts-node-dev/issues/9
"version": "0.2.0",
"configurations": [
{
"name":"ts-node (src/index.ts)",
"type":"node",