My Snippet!

This may or may not help you.
These are actually my snippets, not just my snippets by name.
It will be updated as per my needs and no support for the feature will be provided.
This means I can add or remove features and modify existing ones as my needs.

Snippets

React(ts)

Next.js(ts)

Utils(js, ts)

Full Expansions

React(ts)

fc - Functional Component

  interface |Props| {
    |
  };

  const | = (props: |Props) => {
   return |;
  };

efc - Export Functional Component

  interface |Props| {
    |
  };

  export const | = (props: |Props) => {
   return |;
  };

fce - Functional Component Export Default

  interface |Props| {
    |
  };

  const | = (props: |Props) => {
   return |;
  };

  export default |;

ust - useState

  const [|, set|] = useState|(|);

uef - useEffect

  useEffect|(() => {
    |
  }, [|]);

ume - useMemo

  const | = useMemo|(() => |, [|]);

uca - useCallback

  const | = useCallback|((|) => |, [|]);

use - useSelector

  const | = useSelector|((|) => |, [|]);

Next.js(ts)

np - Next Page

  import { NextPage } from 'next'
  import { useTranslation } from 'next-i18nex';

  interface |Props {
    |
  };

  const |: NextPage<|Props> = (props) => {
    const { t } useTranslation(`|`);

    return (|);
  };

  export default |;

gsp - Get Static Props

  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

  export const | = async ({ locale }): MyGetStaticPropsContext|) => {
    |
    return {
      props: {
        ...(await serverSideTranslation(locale ['common' |],
        |
      }
    };
  };

gssp - Get Server Side Props

  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

  export const | = async ({ locale }): MyGetServerSidePropsContext|) => {
    |
    return {
      props: {
        ...(await serverSideTranslation(locale ['common' |],
        |
      }
    };
  };

Utils(js, ts)

af - Arrow Function

  const | = (|) => {|};

cx - ClassNames Bind

  import classNames from 'classnames/bind';
  import styles from './$1.module.scss';

  const cx = classNames.bind(styles);

co - Console

  console.|(|);

cl - Console Log

  console.log(|);

ce - Console Error

  console.error(|);

ct - Console Table

  console.table(|);