Useful React Snippets (Visual Studio Code Extension)

Download

You can download the extension from the Visual Studio Marketplace.

Snippets

Below is a list of all available snippets and the Shortcodes of each one.

Brief overview

Javascript

Markdown

Generated code snipptes

Javascript snippets

class - class component

| class | extends Component {
  render() {
    return (
      <Fragment>Lorem ipsum</Fragment>
    );
  }
}

iclass - class component with import of React, Component and Fragment

import React, { Component, Fragment } from 'react';

| class | extends Component {
  render() {
    return (
      <Fragment>Lorem ipsum</Fragment>
    );
  }
}

function - functional component

| function |() {
  return (
    <Fragment>Lorem ipsum</Fragment>
  )
}

ifunction - functional component with import of React and Fragment

import React, { Fragment } from 'react';

| function |() {
  return (
    <Fragment>Lorem ipsum</Fragment>
  )
}

const - const (arrow function)

| const | = (props) => {
  return (
    <Fragment>Lorem ipsum</Fragment>
  );
};

iconst - const (arrow function) with import of React and Fragment

import React, { Fragment } from 'react';

| const | = (props) => {
  return (
    <Fragment>Lorem ipsum</Fragment>
  );
};

context - context provider

import React, { createContext, useState } from 'react';

const Context| = createContext(null);

export default function ContextProvider|({ children }) {
  const [count, setCount] = useState(0);

  return (
    <Context|.Provider
      value={{
        count,
        setCount,
      }}
    >
      {children}
    </Context|.Provider>
  );
}

// Don't forget this: Wrap your app in the context provider, like in the example:
//   <ContextProvider|>
//     <App />
//   </ContextProvider|>

router - router

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';

import | from './|';

export default function Router() {
  return (
    <Switch>
      <Route exact path="|" component={|} />
      <Route exact path="/redirect" render={() => <Redirect to="|" />} />
    </Switch>
  );
}

lazyrouter - router with lazy loaded components

import React, { Suspense, lazy } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';

const | = lazy(() => import('./|'));

export default function Router() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="|" component={|} />
        <Route exact path="/redirect" render={() => <Redirect to="|" />} />
      </Switch>
    </Suspense>
  );
}

Markdown snippets

mdlink - link

[link text](https://github.com/peter-stuhlmann/ReactSnippets-vscode/blob/master/url)

mdlinktitle - link with title

[link text](https://github.com/peter-stuhlmann/ReactSnippets-vscode/blob/master/url 'title')

mdimage - image

![alt](https://github.com/peter-stuhlmann/ReactSnippets-vscode/raw/master/path)

mdimagetitle - image with title

![alt](https://github.com/peter-stuhlmann/ReactSnippets-vscode/raw/master/path 'title')

mdlinkimage - image link

[![alt](https://github.com/peter-stuhlmann/ReactSnippets-vscode/raw/master/path)](https://github.com/peter-stuhlmann/ReactSnippets-vscode/blob/master/url)

mdlinkimagetitle - image link with title

[![alt](https://github.com/peter-stuhlmann/ReactSnippets-vscode/raw/master/path 'title')](https://github.com/peter-stuhlmann/ReactSnippets-vscode/blob/master/url)

mdtable - table with tablehead, 5 columns and 3 rows

|     |     |     |     |     |
| --- | --- | --- | --- | --- |
|     |     |     |     |     |
|     |     |     |     |     |
|     |     |     |     |     |

License

Licensed under the MIT License by Peter R. Stuhlmann.