React Global Snippets

A collection of global React.js snippets for JavaScript and JSX files in VS Code.

Features

• React functional component snippet
• useState and useEffect hooks
• Works in .js and .jsx files
• Lightweight and easy to use

Usage

Type the snippet prefix and press Tab.

Example

##ccl

console.log()

##cfc

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

export default Test;

##cfcs

import React from 'react';

const Test = () => {
const [state, setState] = React.useState(null);

  return (
    <div>
      Test
    </div>
  );
};

export default Test;

##cus

const [state, setState] = React.useState(null);

##cue

React.useEffect(() => {
  
}, []);

##cuer

React.useEffect(() => {
  
  
  return ()=> {
  
  }
}, []);

##cfcf

import FusePageSimple from '@fuse/core/FusePageSimple';
import { styled } from '@mui/material/styles';

const Root = styled(FusePageSimple)({
  '& .FusePageSimple-header': {},
  '& .FusePageSimple-toolbar': {},
  '& .FusePageSimple-content': {},
  '& .FusePageSimple-sidebarHeader': {},
  '& .FusePageSimple-sidebarContent': {},
});


const Test = () => {
  return (
      <Root
        header={
          <TitleBar
              title=''
              subTitle=''
          />
        }
        padded
//        contentToolbarExtra={
//          FILTER
//        }
        content={
          CONTENT
       }
     />
  );
};

export default Test;

##cam

const arr1 = arr2?.map(each => each?.key);

##com

const obj_1 = Object.keys(obj_2)?.map(key => {
  return key;
});

##ctable

<CoreTable
  isLoading={isLoading}
  border
  data={data || []}
  tableConfiguration={tbConfig}
/>

##cfilter

<CommlinkFilter
    filterProps={commlinkFilterProps}
    onFilterChange={onFilterChange}
    isFetchingData={isFetchingData}
    removingPropertyFromParams={paramNames_array}
/>

##calert

<CustomAlert
  title=title
  subTitle=sub_title
  okProps={{
      label: ok_label,
      onClick: ok_action,
      loading:isLoading,
  }}
  cancelProps={{
      label: cancel_label,
      onClick: cancel_label,
  }}
>
  children
</CustomAlert>

###Up Coming: Form, schema