Pedro's Choice - ReactJS Snippets

This extension contains a selections of the best ReactJS Snippets chosen by Pedro.

React

Prefix	Renders
rfc →	Creates a React Function Component
rfcall →	Creates a React Function Component with useCallback, useEffect and useState
rfceffect →	Creates a React Function Component with useEffect hook
rfcstate →	Creates a React Function Component with useState hook
itf →	Creates a new Interface (TS only)
uca →	useCallback hook
uef →	useEffect hook
ume →	useMemo hook
ust →	useState hook

Styled Components

Prefix	Renders
sty →	Creates a Styled Components File
sdiv →	Creates a new Styled Div
stynative →	Creates a Styled Components File (React Native)
sview →	Creates a new Styled View (React Native)

Redux - Thunk

Prefix	Renders
rxtype →	Creates a Redux Type File
rxreducer →	Creates a Redux Reducer File
rxaction →	Creates a Redux Action File

Full Expansions

React

• rfc - Create React Functional Component

export function |(){
  return (
    <div>
      <h1>Hello - |</h1>
    </div>
  );
};

• rfcall - Create React Functional Component with useCallback, useEffect and useState

import { useCallback, useEffect, useState } from 'react';

export function |(){
  const [myState, setMyState] = useState('');

  useEffect(() => {
    setMyState('');
  }, []);

  const myCallback = useCallback(() => {
    console.log(myState);
  }, [myState]);

  return (
    <div>
      <h1>Hello - |</h1>
    </div>
  );
};

• rfceffect - Create React Functional Component with useEffect

import { useEffect } from 'react';

export function |(){
  useEffect(() => {
    console.log('myEffect');
  }, []);

  return (
    <div>
      <h1>Hello - |</h1>
    </div>
  );
};

• rfcstate - Create React Functional Component with useState

import { useState } from 'react';

export function |(){
  const [myState, setMyState] = useState('');

  return (
    <div>
      <h1>Hello - |</h1>
    </div>
  );
};

• itf - Creates a new Interface

interface | {
  myProps?: boolean;
}

• uca - useCallback hook

const | = useCallback(() => {

}, []);

• uef - useEffect hook

useEffect(() => {

}, []);

• ume - useMemo hook

const | = useMemo(() => {

}, []);

• ust - useState hook

const [|, set|] = useState();
//Press Tab to apply CamelCase. e.g. [state, setState]

Styled Components

• sty - Creates a Styled Components File

import styled from 'styled-components';

export const div = styled.div``;

• sdiv - Creates a new Styled div

export const | = styled.div``;

• stynative - Creates a Styled Components File for React Native

import styled from 'styled-components/native';

export const div = styled.View``;

• sview - Creates a new Styled View

export const | = styled.View``;

Redux - Thunk

• rxtype - Creates a Redux Type File

export const START_FETCH = '@|/START_FETCH';
export const DONE_FETCH = '@|/DONE_FETCH';
export const GET_DATA = '@|/GET_DATA';

interface | {
  myData: string;
}

export interface State {
  readonly loading: {
    getData: boolean;
  };
  readonly data: [] | null;
}

interface StartFetch {
  type: typeof START_FETCH;
  kind: string;
}

interface DoneFetch {
  type: typeof DONE_FETCH;
  kind: string;
}

interface GetData {
  type: typeof GET_DATA;
  data: [];
}

export type ActionTypes = 
   | StartFetch
   | DoneFetch
   | GetData;

• rxreducer - Creates a Redux Reducer File

import * as Types from './types';

const INITIAL_STATE = {
  data: null,
  loading: {
    getData: false,
  },
};

export default (
  state = INITIAL_STATE,
  action: Types.ActionTypes,
): Types.State => {
  switch (action.type) {
    case Types.START_FETCH:
      return { ...state, loading: { ...state.loading, [action.kind]: true } };
    case Types.DONE_FETCH:
      return { ...state, loading: { ...state.loading, [action.kind]: false } };
    case Types.GET_DATA:
      return { ...state, data: action.data };
    default:
      return state;
  }
};

• rxaction - Creates a Redux Action File

import { Action } from 'redux';
import { ThunkAction } from 'redux-thunk';
import { StoreState } from 'store';
import * as Types from './types';

export const | = (): ThunkAction<
  void,
  StoreState,
  unknown,
  Action<string>
> => async dispatch => {
  try {
    dispatch({ type: Types.START_FETCH });
    dispatch({ type: Types.DONE_FETCH });
  } catch {
    // error
  }
};

---

Add to your project

There are 2 ways you can add Pedro's Choice - Keymap to your project:

By command

Launch VS Code Quick Open (Ctrl+P), paste ext install pedroschoice.pedros-choice-reactjs-snippets, and press enter.

By the Extension Marketplace

Launch VS Code Extension Marketplace (Ctrl+Shift+X), search for Pedro's Choice, and look for the best looking bald dude in the store.

Contributing

How do I contribute?

If you have a sugestion for a new snippet or found some bug, feel free to help me out.

1. Head over to the GitHub repository.
2. Open the snippets-ts.json file or the snippets.json file.
3. Make the changes and updated the README file.
4. Open a pull request.

License

MIT