Skip to content

Instantly share code, notes, and snippets.

View stsiwo's full-sized avatar

sts stsiwo

View GitHub Profile
@stsiwo
stsiwo / useful-custom-hooks-you-should-know-useScroll.tsx
Last active August 12, 2021 13:30
useful-custom-hooks-you-should-know-useScroll tsx
import { logger } from "configs/logger";
import * as React from "react";
const log = logger("useScroll");
// def
export declare type ScrollPosStatusType = {
y: number
}
@stsiwo
stsiwo / useful-custom-hooks-you-should-know-useOutsideClick.tsx
Created August 8, 2021 12:34
useful-custom-hooks-you-should-know-useOutsideClick tsx
import { UseOutsideClick } from "./types";
import * as React from "react";
// def
export declare type UseOutsideClick = {
ref: React.MutableRefObject<HTMLElement>
callback: () => any
}
export const useOutsideClick = (input: UseOutsideClick): void => {
@stsiwo
stsiwo / useful-custom-hooks-you-should-know-useResponsive.tsx
Last active August 12, 2021 13:37
useful-custom-hooks-you-should-know useResponsive
import * as React from 'react'
import {
UseResponsiveStatusInputType,
UseResponsiveStatusOutputType,
ScreenSizeStatusType
} from './types';
// def
export declare type ScreenSizeStatusType = {
@stsiwo
stsiwo / useful-custom-hooks-you-should-know-useRevious.tsx
Last active August 12, 2021 13:42
useful-custom-hooks-you-should-know useRevious
import { UsePreviousInput } from "./types";
import * as React from "react";
import { logger } from 'configs/logger';
const log = logger("usePrevious");
// def
export declare type UsePreviousInput<S extends any> = {
value: S
}
@stsiwo
stsiwo / useful-custom-hooks-you-should-know-useFetch.tsx
Last active August 8, 2021 11:29
useful-custom-hooks-you-should-know useFetch
import Axios, { AxiosError, AxiosResponse } from "axios";
import { logger } from "configs/logger";
import * as React from "react";
import { UseFetchInput, UseFetchOutput } from "./types";
const log = logger("useFetch");
// def
export declare type UseFetchInput = AxiosRequestConfig;
@stsiwo
stsiwo / auto-complete-search-input-bar.scss
Last active August 7, 2021 12:14
auto-complete-search-input-bar style
.input-box {
width: 300px;
margin: 0 auto;
}
.search-input {
text-align: center;
font-size: 1em;
width: 100%;
@stsiwo
stsiwo / auto-complete-search-input-bar.tsx
Last active August 7, 2021 12:00
auto-complete-search-input-bar
import { logger } from "configs/logger";
import * as React from "react";
import "./style.scss";
const log = logger("Header");
declare type CountryType = {
name: string;
code: string;
};
@stsiwo
stsiwo / horizontal-list-with-swipe-v2.scss
Created August 5, 2021 06:13
horizontal-list-with-swipe-v2 style
.outerBox {
position: relative;
padding: 8px 8px;
max-width: 100%;
width: 100%;
min-width: 310;
}
.innerBox {
display: flex;
@stsiwo
stsiwo / horizontal-list-with-swipe-v2.tsx
Created August 5, 2021 06:11
horizontal-list-with-swipe-v2
mport { logger } from 'configs/logger';
import * as React from 'react';
import "./style.scss";
const log = logger("Header")
const RightArrowSvg = require("src/assets/right-arrow.svg");
const LogoSvg = require("src/assets/logo.svg");
const SingleLineListBox: React.FunctionComponent<{}> = (props) => {
@stsiwo
stsiwo / mastering-cache-with-reactjs-1-request-check-worker.tsx
Last active February 17, 2021 21:29
mastering-cache-with-reactjs-1-request-check-worker
/**
*
* request url check worker.
*
* This worker is a nested worker. called by 'requestDomainWorker'.
*
*
* check the request url has requested in the past
* if so, don't need to do anything since data exists in store
* if no, prep for request to backend api