Slash [/] snippets

This extension provides my own most used snippets. It contains snippets for React, Redux, React Native and ofcourse HTML boilerplate.

StyleSheet

React Native Components

rnsc

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const $1 = () => {
  return (
    <View>
      <Text>$0</Text>
    </View>
  );
};

const styles = StyleSheet.create({});

export default $1;

rnc

import React from 'react';
import { View, Text } from 'react-native';

const $1 = () => {
  return (
    <View>
      <Text>$0</Text>
    </View>
  );
};

export default $1;

React Components

rsc

import React from 'react';

const $1 = () => {
  return (
    <div>
      <h2>$0</h2>
    </div>
  );
};

export default $1;

React Typescript Components

rfc-ts

import React from 'react';

const ${1:${TM_FILENAME_BASE}} = () => {
  return <div>${0:${TM_FILENAME_BASE}}</div>;
};

export default ${1:${TM_FILENAME_BASE}};

rfc-p-ts

import React from 'react';
      
import { ${1:${TM_FILENAME_BASE}}Props } from './types';

const ${1:${TM_FILENAME_BASE}} = ({}: ${1:${TM_FILENAME_BASE}}Props) => {
  return <div>${0:${TM_FILENAME_BASE}}</div>;
};
      
export default ${1:${TM_FILENAME_BASE}};    

r-iprops

export interface ${1}Props {${2}}

Material-UI React

muirsc

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Typography, Box } from '@material-ui/core';

const useStyles = makeStyles({});

const $1 = ({ className = '' }) => {
  const classes = useStyles();
  const rootClass = `${classes.root} ${className}`;

  return (
    <Box className={rootClass}>
      <Typography>$0</Typography>
    </Box>
  );
};

export default $1;

muirscpropt

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { Typography, Box } from '@material-ui/core';

const useStyles = makeStyles({});

const $1 = ({ className = '' }) => {
  const classes = useStyles();
  const rootClass = `${classes.root} ${className}`;

  return (
    <Box className={rootClass}>
      <Typography>$0</Typography>
    </Box>
  );
};

$1.propTypes = {
  className: PropTypes.string,
};
export default $1;

muirscpropt-is

import React from 'react';
import PropTypes from 'prop-types';
import { Typography, Box } from '@material-ui/core';

import { useStyles } from './styles';

const $1 = ({ className = '' }) => {
  const classes = useStyles();
  const rootClass = `${classes.root} ${className}`;

  return (
    <Box className={rootClass}>
      <Typography>$0</Typography>
    </Box>
  );
};

$1.propTypes = {
  className: PropTypes.string,
};
export default $1;

muirscpropt-container

import React from 'react';
import PropTypes from 'prop-types';

import $1View from './$1View';

const $1 = ({ className = '' }) => {
  return <$1View className={className} />;
};

$1.propTypes = {
  className: PropTypes.string,
};
export default $1;

muirscpropt-presentation

import React from 'react';
import PropTypes from 'prop-types';
import { Typography, Box } from '@material-ui/core';

import { useStyles } from './styles';

const $1 = ({ className = '' }) => {
  const classes = useStyles();
  const rootClass = `${classes.root} ${className}`;

  return (
    <Box className={rootClass}>
      <Typography>$0</Typography>
    </Box>
  );
};

$1.propTypes = {
  className: PropTypes.string,
};
export default $1;

muistylehook

import { makeStyles } from '@material-ui/core/styles';

export const useStyles = makeStyles({
  root: {},
});

console.log

clo

console.log('[MY] $1 >>>', $1);

gotcha

console.log('gotcha!$1');