mirror of
https://github.com/Mastermindzh/react-starter-kit.git
synced 2025-01-20 18:41:41 +01:00
95 lines
3.0 KiB
Plaintext
95 lines
3.0 KiB
Plaintext
{
|
|
"Create Typed Functional Component": {
|
|
"prefix": ["rtfc", "rfc", "trfc", "react-typed-functional-component"],
|
|
"body": [
|
|
"import { FunctionComponent } from \"react\";",
|
|
"",
|
|
"type Props = {};",
|
|
"",
|
|
"export const ${1:${TM_FILENAME_BASE}}: FunctionComponent<Props> = () => {",
|
|
" return <h1>${1:${TM_FILENAME_BASE}}</h1>;",
|
|
"};",
|
|
""
|
|
],
|
|
"description": "Create a simple functional component"
|
|
},
|
|
"Create Typed Functional Component With Children": {
|
|
"prefix": ["rtfcc", "rfcc", "react-typed-functional-component-children"],
|
|
"body": [
|
|
"import { FunctionComponent, ReactNode } from \"react\";",
|
|
"",
|
|
"type Props = { children?: ReactNode };",
|
|
"",
|
|
"export const ${1:${TM_FILENAME_BASE}}: FunctionComponent<Props> = ({ children }) => {",
|
|
" return <>{children}</>;",
|
|
"};",
|
|
""
|
|
]
|
|
},
|
|
"Create Typed Functional Container": {
|
|
"prefix": ["rtfcontainer", "rtc", "redux-container"],
|
|
"body": [
|
|
"import { useAppDispatch, useAppSelector } from \"app/hooks\";",
|
|
"",
|
|
"export function ${1:${TM_FILENAME_BASE}}() {",
|
|
" //const {} = useAppSelector(select${1:${TM_FILENAME_BASE}}State);",
|
|
" const dispatch = useAppDispatch();",
|
|
"",
|
|
" return (",
|
|
" <div>",
|
|
" <h1>${1:${TM_FILENAME_BASE}}</h1>",
|
|
" </div>",
|
|
" );",
|
|
"}",
|
|
""
|
|
]
|
|
},
|
|
"Create Empty Reducer Slice": {
|
|
"prefix": ["redux-slice", "rs", "ers"],
|
|
"body": [
|
|
"import { createSlice } from \"@reduxjs/toolkit\";",
|
|
"import { RootState } from \"app/store\";",
|
|
"",
|
|
"const initialState = {",
|
|
" value: 0,",
|
|
" status: \"idle\",",
|
|
"};",
|
|
"",
|
|
"export const ${1:${TM_FILENAME_BASE}}Slice = createSlice({",
|
|
" name: \"${1:${TM_FILENAME_BASE}}\",",
|
|
" initialState,",
|
|
" reducers: {},",
|
|
" extraReducers: (builder) => {},",
|
|
"});",
|
|
"",
|
|
"export const {} = ${1:${TM_FILENAME_BASE}}Slice.actions;",
|
|
"",
|
|
"export const select${1:${TM_FILENAME_BASE}}State = (state: RootState) => state.${1:${TM_FILENAME_BASE}};",
|
|
"",
|
|
"export default ${1:${TM_FILENAME_BASE}}Slice.reducer;"
|
|
]
|
|
},
|
|
"react-i18next useTranslate hook": {
|
|
"prefix": ["useTranslation", "translate", "i18-trans"],
|
|
"body": ["const [translate] = useTranslation();"]
|
|
},
|
|
"react-styled-component": {
|
|
"prefix": ["rsfc", "rsc", "react-styled-component"],
|
|
"body": [
|
|
"import { FunctionComponent } from \"react\";",
|
|
"import styled from \"styled-components\";",
|
|
"",
|
|
"type Props = { className?: string };",
|
|
"",
|
|
"const ${1:${TM_FILENAME_BASE}}: FunctionComponent<Props> = ({className}) => {",
|
|
" return <h1 className={className}>${1:${TM_FILENAME_BASE}}</h1>;",
|
|
"};",
|
|
"",
|
|
"const Styled${1:${TM_FILENAME_BASE}} = styled(${1:${TM_FILENAME_BASE}})``;",
|
|
"",
|
|
"export { Styled${1:${TM_FILENAME_BASE}} as ${1:${TM_FILENAME_BASE}} };",
|
|
""
|
|
]
|
|
}
|
|
}
|