This extension contains a selections of the best ReactJS Snippets chosen by Pedro.
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 |
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) |
Prefix | Renders |
---|---|
rxtype → |
Creates a Redux Type File |
rxreducer → |
Creates a Redux Reducer File |
rxaction → |
Creates a Redux Action File |
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]
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``;
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
}
};
There are 2 ways you can add Pedro's Choice - Keymap to your project:
Launch VS Code Quick Open (Ctrl+P
), paste ext install pedroschoice.pedros-choice-reactjs-snippets
, and press enter.
Launch VS Code Extension Marketplace (Ctrl+Shift+X), search for Pedro's Choice
, and look for the best looking bald dude in the store.
If you have a sugestion for a new snippet or found some bug, feel free to help me out.
- Head over to the GitHub repository.
- Open the
snippets-ts.json
file or thesnippets.json
file. - Make the changes and updated the README file.
- Open a pull request.