Before we start 🟠
As the saying goes, "God helps those who help themselves". So I accumulated my efforts and did it. And now you, my colleague, as well as me, have enough fingers and toes to count all snippets I've created. In addition snippets' prefix is easy to remember and find the right keys on your keyboard. Add this awesome set, enjoy and boost your productivity.⚡
Note: kebab-case, snake_case, camelCase are formatted in PascalCase.
E.g. primary-btn.jsx + asfr
turns into export default function PrimaryBtn() {}
etc.
Finally, I dedicate this extension to my dad, who celebrates his birthday on 13
th of May.👋🎉
Overview
Snippet |
Description |
|
asy |
Arrow function named export |
ℹ️ |
asd |
Arrow function default export |
ℹ️ |
asfr |
File related function |
ℹ️ |
aswr |
Folder related function |
ℹ️ |
asch |
Choice function |
ℹ️ |
us |
useState hook |
ℹ️ |
uo |
useOptimistic hook |
ℹ️ |
uref |
useRef hook |
ℹ️ |
ue |
useEffect hook |
ℹ️ |
ule |
useLayoutEffect hook |
ℹ️ |
cctx |
Create Context |
ℹ️ |
fli |
FlatList |
ℹ️ |
ec |
Expo Component |
ℹ️ |
ss |
StyleSheet |
ℹ️ |
ssac |
StyleSheet align center |
ℹ️ |
ssrw |
StyleSheet row |
ℹ️ |
ess |
Export StyleSheet |
ℹ️ |
ersea |
useLocalSearchParams |
ℹ️ |
ers |
Expo Router Stack layout |
ℹ️ |
ert |
Expo Router Tabs layout |
ℹ️ |
React
Note: In examples below the vertical bar |
is just a positioned cursor.
asy
: 💡 Arrow function named export ⬆️
export const Example = () => {
return (
<>|</>
)
}
asd
: 💡 Arrow function default export ⬆️
const Example| = () => {
return (
<></>
)
}
export default Example|;
asfr
: 💡 Function name relates to file name ⬆️
export default function Example() {
return (
<>|</>
)
}
aswr
: 💡 Function name relates to folder (wrapper) name ⬆️
export default function FolderName() {
return (
<>|</>
)
}
asch
: 💡 Choose function name between 'Page' and 'Layout' ⬆️
export default function |Layout() {
return (
<>|</>
)
}
us
: 💡 useState hook ⬆️
const [|, set|] = useState("");
// press `Tab` after typing the value and let magic happen
uo
: 💡 useOptimistic hook ⬆️
const [optimistic|, setOptimistic|] = useOptimistic(asyncRes, (state, action) => {});
// press `Tab` after typing the value and let magic happen
uref
: 💡 useRef hook ⬆️
const |Ref = useRef(null);
ue
: 💡 useEffect hook ⬆️
useEffect|(() => {
}, [])
// press `Ctrl`+`Space` to import useEffect
ule
: 💡 useLayoutEffect hook ⬆️
useLayoutEffect|(() => {
}, [])
// press `Ctrl`+`Space` to import useLayoutEffect
cctx
: 💡 Create React Context ⬆️
import { createContext, useContext } from "react";
const |Context = createContext(null);
export const |ContextProvider = ({ children }) => {
return (
<|Context.Provider value={{}}>
{children}
</|Context.Provider>
);
}
export const use| = () => {
const value = useContext(|Context);
if (!value) {
throw new Error(`use| must be wrapped inside |ContextProvider`);
}
return value;
}
React Native, Expo
fli
: 💡 FlatList ⬆️
<FlatList|
data={data|}
keyExtractor={item => item.id}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => (
<RenderItem| />
)}
/>
ec
: 💡 Expo Component ⬆️
import { View, Text } from 'react-native';
export const Example = () => {
return (
<View>
<Text>Example|</Text>
</View>
)
}
ss
: 💡 StyleSheet ⬆️
const styles = StyleSheet|.create({
})
ssac
: 💡 StyleSheet align center ⬆️
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
gap: 16,|
},
ssrw
: 💡 StyleSheet row ⬆️
rowContainer: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
margin: 16,|
},
ess
: 💡 Export StyleSheet ⬆️
import { StyleSheet } from "react-native";
export default StyleSheet.create({
mainContainer: {
flex: 1,
backgroundColor: "#fff",|
},
})
ersea
: 💡 useLocalSearchParams ⬆️
const { | } = useLocalSearchParams();
ers
: 💡 Expo Router Stack layout ⬆️
import { Stack } from "expo-router";
export default function StackLayout() {
return (
<Stack>
<Stack.Screen name="|" options={{ | }} />
</Stack>
)
}
ert
: 💡 Expo Router Tabs layout ⬆️
import { Tabs } from "expo-router";
export default function TabsLayout() {
return (
<Tabs
screenOptions={{|}}
>
<Tabs.Screen name="|" options={{ | }} />
</Tabs>
)
}
Demo
![Demo of how some snippets work](https://raw.githubusercontent.com/yu1iaw/react-snippets-extension/main/images/Demo.gif)
That's it! Install and happy coding!
Lastly
Just to make your work with this extension more comfortable, you can disable [abc] suggestion in VS Code using following steps:
Ctrl + ,
opens Settings⚙️ > type "show words" in the Search field > uncheck 'Editor>Suggest: Show Words'