React snippets for true ReactGods

ReactGodSnippets for true reactGods who enjoy using Hooks and Functional Components.

Note

This extension does not have any Class Components Snippets.

Supported languages

• React
• Javascript
• Typescript

Imports

ir - Import React

import React from 'react';

irr - Import React router

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

iwr - Import withRouter

import { withRouter } from 'react-router';

imc - Import Component

import ComponentName from '';

isc - Import styled components

import styled from 'styled-components';

ius - Import useState hook

import React, { useState } from 'react';

iue - Import useEffect hook

import React, { useEffect } from 'react';

iur - Import useRef hook

import React, { useRef } from 'react';

iured - Import useReducer hook

import React, { useReducer } from 'react';

iuc - Import useContext

import React, { useContext } from 'react';

iucall - Import useCallback

import React, { useCallback } from 'react';

ium - Import useMemo

import React, { useMemo } from 'react';

iuh - Import useHistory

import { useHistory } from 'react-router-dom';

iul - Import useLocation

import { useLocation } from 'react-router-dom';

iup - Import useParams

import { useParams } from 'react-router-dom';

Functions / Components

es6 - es6 functional component

import React from 'react';

const ComponentName = () => {
  return(
    <div></div>
  );
};

export default ComponentName;

edes6 - es6 with default export

import React from 'react';

export default () => {
  return(
    <div></div>
  );
};

1liner - es6 1 line function

import React from 'react';

const ComponentName = () => <div></div>

export default ComponentName;

func - Functional component

import React from 'react';

function ComponentName() {
  return(
    <div></div>
  );
};

export default ComponentName;

edfunc - Functional component with default export

import React from 'react';

export default function ComponentName() {
  return(
    <div></div>
  );
};

next - Creates next es6 component

const ComponentName = () => {
  return(
    <>
      
    </>
  );
};

export default ComponentName;

context - Creates a context file

import React, { useState, useEffect, useRef, createContext } from 'react'

export const AppContext = createContext();

export const AppState = ({ children }) => {
   return (
      <AppContext.Provider value={{  }}>
          {children}
      </AppContext.Provider>
   );
};

React Router

router - Creates React Router with Routes

<Router>
   <Route path="/route" component={ComponentName} />
</Router>

route - Creates React Route

<Route path="/about" component={About} />

link - Creates React Router Link

<Link to="/home">Home</Link>

navlink - Creates React Router NavLink

<NavLink to="/home">Home</NavLink>

Hooks

state - useState hook

const [name, setName] = useState('Milos');

effect - useEffect hook

useEffect(() => {
  // Code block here
}, [])

ref - useRef hook

const nameOfTheRef = useRef();

reducer - useReducer hook

const [state, dispatch] = useReducer(reducer, initialArg, init);

callback - useCallback hook

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

memo - useMemo hook

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

history - useHistory hook

const history = useHistory();

location - useLocation hook

const location = useLocation();

params - useParams hook

const id = useParams();

Props

props - Destructure Props

const { name, setName } = props;

Emotion Css

emo - Creates emotion template

/** @jsx jsx */
import { css, jsx } from '@emotion/core';

const ComponentName = () => {
    return(
        <div></div>
    );
};

export default ComponentName;

css - Creates emotion css / stylesheet

const styles = css`

`;

style - Creates jsx style

<style jsx>{`
   
`}</style>

Reusable Components

btn - Creates a reusable button component with props

const Button = ({ btnText }) => <button>{btnText}</button>

container - Creates a reusable container component allowing you to nest elements

const Container = ({ children }) => <div className="container">{children}</div>

input - Creates a reusable input component with props

const Input = ({ inputType, inputVal, setInputVal }) => (
  <input
    type={inputType}
    value={inputVal}
    onChange={e => setInputVal(e.target.value)}
  />
);

Javascript / React snippets

cl - Console log

console.log();

ie - If else statement

if() {
  
} else {
  
};

switch - Switch statement

switch() {
 case x:
    
   break;
 case y:
    
   break;
 default:
    
};

map - Map

numbers.map((num, index) => (
   <div key={index}>{num}</div>
));

filter - Filter

numbers.filter(num => num > 5);

stm - Set timeout

setTimeout(() => {
   
}, 1000);

sti - Set interval

setInterval(() => {
   
}, 1000);

arr - Array

const numbers = [];

el - Event Listener

button.addEventListener('click', () => {
   
});

Release Notes

1.0.7

• Added support for Typescript