Before we start 🟠

You can remember and find the right keys for these snippets on your keyboard with ease. Add this awesome set to 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 13th of May.👋🎉

Overview

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 (
        <>|</>
    )
}

uas : 💡 useActionState hook ⬆️

const [error, action, isPending] = useActionState(fn, null);

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";

export const |Context = createContext(null);

export const |ContextProvider = ({ children }) => {
    

    return (
        <|Context value={{}}>
            {children}
        </|Context>
    );
}

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 hook ⬆️

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

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'