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>

##cffilter

import CommlinkFilter from '@commlink/commlinkFilter/CommlinkFilter';
import useCommlinkFilter from '@commlink/hooks/useCommlinkFilter';
import { Box } from '@mui/material';
import {
    fetchOnlyProgramListFromProgramSetup,
    selectOnlyProgramListFromProgramSetup,
} from 'app/store/fuse/commonSlice';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useSearchParams } from 'react-router-dom';


const getFilterProps = () => [{
    key: 'programId',
    label: 'Program',
    fieldType: 'dropdown',
    options: [],
    value: '',
    // emptyItem: 'All',
    required: true,
    grid: { xs: 4, sm: 3, md: 2 },
}];



const Test = () => {
    const dispatch = useDispatch();
    const [searchParams, setSearchParams] = useSearchParams();

    const { commlinkFilterProps, updateFilterDropdownOptions, setFilterValue } = useCommlinkFilter(
       getFilterProps()
    );

    const { data: programList, isLoading: programLoading } = useSelector(
        selectOnlyProgramListFromProgramSetup
    );

    const isFilterFetchingData = programLoading;

    const programApiRef = React.useRef(false);
    React.useEffect(() => {
        if (!programApiRef?.current) {
           programApiRef.current = true;
            dispatch(fetchOnlyProgramListFromProgramSetup())
                .unwrap()
                .then((res) => {
                    const plist = (res || [])?.filter((pro) => pro?.hasTrack);
                    const programId = searchParams.get('programId') || plist?.[0]?.value;
                    updateFilterDropdownOptions('programId', plist, programId);
                    setFilterValue({ programId });
                    if (!searchParams.get('programId')) {
                        searchParams.set('programId', programId);
                        setSearchParams(searchParams, { replace: true });
                    }
                })
                .catch((er) => {
                    updateFilterDropdownOptions('programId', [], '');
                });
        }
    }, [dispatch, searchParams, setFilterValue, setSearchParams, updateFilterDropdownOptions]);

    const onFilterChange = (data, triggeredBy) => {
        console.log('Filter changed:', data, 'Triggered by:', triggeredBy);
    };

    return (
       <Box mx={1}>
            <CommlinkFilter
                filterProps={commlinkFilterProps}
                onFilterChange={onFilterChange}
                isFetchingData={isFilterFetchingData}
            />
        </Box>
    );
};

export default Test;

##cform

import { yupResolver } from '@hookform/resolvers/yup';
import CustomAlert from 'app/component/baseUi/customAlert';
import { FormDropDown, FormTextBox } from 'app/component/baseUi/formFields';
import JwtService from 'app/services/jwtService';
import _ from 'lodash';
import React from 'react';
import { useForm } from 'react-hook-form';
import { useDispatch } from 'react-redux';
import * as yup from 'yup';

const schema = yup.object().shape({
    name: yup.string().required('name is required'),
    Test: yup.number().required('Select a Test').typeError('Select a Test'),
    test2: yup.number().required('Select a test2').typeError('Select a test2'),
});

const tokenPayload = JwtService.getTokenPayload();
const TOKEN_CAMPUS_ID = tokenPayload?.campusId;

const Test = ({ dialogProps, onCancel, initData }) => {
    console.log('dialogProps:', dialogProps);
    const dispatch = useDispatch();
    const [loading, setLoading] = React.useState(false);

    const useFormProperties = useForm({
        mode: 'onChange',
        defaultValues: {
            name: '',
            Test: '',
            test2: '',
        },
        resolver: yupResolver(schema),
    });
    const {
        formState: { isValid, dirtyFields },
        handleSubmit,
        watch,
        setValue,
    } = useFormProperties;

    const onSubmit = (model) => {
        const apiPrms = { ...model, campusId: TOKEN_CAMPUS_ID };
        setLoading(true);
        dispatch(createNewBatch(apiPrms))
            .unwrap()
            .then((res) => {
                setLoading(false);
                if (res?.success) {
                    initData();
                    onCancel();
                }
            })
            .catch((er) => {
                setLoading(false);
            });
    };

    return (
        <CustomAlert
            title="NEW_FORM"
            okProps={{
                label: 'LABEL',
                formId: 'form_id',
                disabled: _.isEmpty(dirtyFields) || !isValid,
                type: 'submit',
                // onClick: handleSubmit(onSubmit),
                loading,
            }}
            cancelProps={{
                label: 'Cancel',
                onClick: onCancel,
            }}
        >
            <form id="form_id" onSubmit={handleSubmit(onSubmit)}>
                <FormTextBox
                    name='name'
                    label='name'
                    useFormProperties={useFormProperties}
                    required
                />
                <FormDropDown
                    name='Test'
                    label='Test'
                    useFormProperties={useFormProperties}
                    items={[]}
                    required
                />

                <FormDropDown
                    name='test2'
                    label='test2'
                    useFormProperties={useFormProperties}
                    items={[]}
                    required
                />
            </form>
        </CustomAlert>
    );
};

export default Test;