dongnguyenvn

@mixin scrollbars(
  $size: 10px,
  $foreground-color: #eee,
  $background-color: #333
) {
  // For Google Chrome
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }

dongnguyenvn

import { useEffect, useState } from "react";
import axios from 'axios';
const useAxios = (configParams) => {
    axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
    const [res, setRes] = useState('');
    const [err, setErr] = useState('');
    const [loading, setLoading] = useState(true);
    useEffect(() => {
       fetchDataUsingAxios(configParams);
    }, []);

dongnguyenvn

import { useRef, useEffect } from 'react';

export function useIsMounted() {
  const mounted = useRef(false);

  useEffect(() => {
    mounted.current = true;

    return () => {
      mounted.current = false;

dongnguyenvn

/**
 * @example
 * import styled from "styled-components";
 * import {bp, atAndBelow} from '../path/to/file';
 *
 * const Text = styled.p`
 *   font-size: 20px;
 *
 *   ${atAndBelow(bp.s, (css) => css`
 *     font-size: 18px;

dongnguyenvn

import { NextApiHandler } from "next";

interface User {
  id: number;
  name: string;
  email: string;
}

const handler: NextApiHandler<User[]> = (req, res) => {
  res

dongnguyenvn

export randomId = (size) => {
  return crypto.randomBytes(size).toString('hex')
}

dongnguyenvn

function classNames(...classes) {
  return classes
    .filter(item => !!item)
    .join(' ');
}

function classNames(...classes) {
  return classes
    .filter(Boolean)
    .join(' ');

dongnguyenvn

const useFetch = url => {
    const [data, setData] = useState();
    const [error, setError] = useState();
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        setLoading(true);
        fetch(url)
            .then(response => response.json())
            .then(setData)

dongnguyenvn

const useScreenSizeWindow = () => {
  const [screenSize, getDimension] = useState({
    dynamicWidth: window.innerWidth,
    dynamicHeight: window.innerHeight
  });

  const setDimension = () => {
    getDimension({
      dynamicWidth: window.innerWidth,
      dynamicHeight: window.innerHeight

dongnguyenvn

import { useEffect, useState } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;