Welcome to SnippetX

JavaScript | React | React-Native | Expo Router | Zustand | Tanstack Query | Redux-Toolkit | ShadCn

Simple, minimal
Mostly used snippets.
No nonsense.
Better alternative of ES7+ React/Redux/React-Native

Features

JavaScript Snippets
- clg
- clo
- cls
- jmap
- jfilter
- jfind
- jparse
- jsfy
React Snippets
- rfc
- rfce
- rfca
- us
- ue
- od
- rmap
- rfind
- rfilter
- rtern
React-Native Snippets
- rnf - React Native Functional Component
- rnfs - React Native Functional Component with Styles
Expo Router Snippets
Zustand Snippets
- zs
- zu
Tanstack Query Snippets
- tcq
- tuq
- tcm
- tum
Redux-Toolkit Snippets
- usl
- udis
- red
- ered
- asthunk
ShadCn Snippets
- snibutton
- snbutton
- snicard
- sncard
- sniinput
- sninput
- snidialog
- sndialog
- sniform
- snformfield

1. JavaScript Snippets

clg
```
console.log();
```
clo
```
console.log("first", first);
```
cls
```
console.log("");
```
jmap
```
const users = users.map((user)=>(

))
```

jfilter

const users = users.filter((user)=>(

))

jfind
```
const users = users.find((user)=>(

))
```
jparse
```
JSON.parse();
```
jsfy
```
JSON.stringify();
```

2. React Snippets

rfc

const App = () => {
  return <div>App</div>;
};
export default App;

rfce

export default function App() {
  return <div>App</div>;
}

rfca

export default async function App() {
  return <div>App</div>;
}

us

const [loading, setLoading] = useState(initialValue);

ue
```
useEffect(() => {}, []);
```
od
```
const { photo } = users.profile;
```

rmap

{users.map((user) => (
   <div key={}></div>
))}

rfilter

{users.filter((user) => (
   <div key={}></div>
))}

rfind

{users.find((user) => (
   <div key={}></div>
))}

rtern
```
{users? do something : something else}
```

3. React-Native Snippets

rnf

import { View, Text } from "react-native";

export default function Component() {
  return (
    <View>
      <Text>Component</Text>
    </View>
  );
}

rnfs

import { View, Text, StyleSheet } from "react-native";

export default function Component() {
  return (
    <View style={styles.container}>
      <Text>Component</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

4. Expo Router Snippets

ers

import { Stack } from "expo-router";

export default function AppLayout() {
  return <Stack />;
}

ert

import { Tabs } from "expo-router";

export default function TabLayout() {
  return <Tabs />;
}

erd

import { Drawer } from "expo-router/drawer";

export default function DrawerLayout() {
  return <Drawer />;
}

import { Drawer } from "expo-router/drawer";
import { Ionicons } from "@expo/vector-icons";

export default function DrawerLayout() {
  return (
    <Drawer
      screenOptions={{
        drawerActiveTintColor: "#007AFF",
        drawerInactiveTintColor: "#8E8E93",
        headerShown: true,
      }}
    >
      <Drawer.Screen
        name="index"
        options={{
          title: "Home",
          drawerLabel: "Home",
          drawerIcon: ({ color, size }) => (
            <Ionicons name="home-outline" size={size} color={color} />
          ),
        }}
      />
      <Drawer.Screen
        name="settings"
        options={{
          title: "Settings",
          drawerLabel: "Settings",
          drawerIcon: ({ color, size }) => (
            <Ionicons name="settings-outline" size={size} color={color} />
          ),
        }}
      />
      <Drawer.Screen
        name="profile"
        options={{
          title: "Profile",
          drawerLabel: "Profile",
          drawerIcon: ({ color, size }) => (
            <Ionicons name="person-outline" size={size} color={color} />
          ),
        }}
      />
    </Drawer>
  );
}

ertl

import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: "#007AFF",
        headerShown: false,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home-outline" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: "Settings",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="settings-outline" size={size} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

ersl

import { Stack } from "expo-router";

export default function StackLayout() {
  return (
    <Stack
      screenOptions={{
        headerStyle: {
          backgroundColor: "#007AFF",
        },
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "bold",
        },
      }}
    >
      <Stack.Screen name="index" options={{ title: "Home" }} />
      <Stack.Screen name="details" options={{ title: "Details" }} />
    </Stack>
  );
}

erdl

import { Drawer } from "expo-router/drawer";
import { Ionicons } from "@expo/vector-icons";

export default function DrawerLayout() {
  return (
    <Drawer
      screenOptions={{
        drawerActiveTintColor: "#007AFF",
        drawerInactiveTintColor: "#8E8E93",
        headerShown: true,
      }}
    >
      <Drawer.Screen
        name="index"
        options={{
          title: "Home",
          drawerLabel: "Home",
          drawerIcon: ({ color, size }) => (
            <Ionicons name="home-outline" size={size} color={color} />
          ),
        }}
      />
      <Drawer.Screen
        name="settings"
        options={{
          title: "Settings",
          drawerLabel: "Settings",
          drawerIcon: ({ color, size }) => (
            <Ionicons name="settings-outline" size={size} color={color} />
          ),
        }}
      />
      <Drawer.Screen
        name="profile"
        options={{
          title: "Profile",
          drawerLabel: "Profile",
          drawerIcon: ({ color, size }) => (
            <Ionicons name="person-outline" size={size} color={color} />
          ),
        }}
      />
    </Drawer>
  );
}

5. Zustand Snippets

zs

import { create } from "zustand";
import { persist } from "zustand/middleware";

export type Status = "TODO" | "IN_PROGRESS" | "DONE";

export type Task = {
  id: string | number;
  title: string;
  description?: string;
  status: Status;
};

export type State = {
  tasks: Task[];
}

export type Actions = {
  addTask: (title: string, description?: string) => void;
  removeTask: (title: string) => void;
};

export const useTaskStore = create<State & Actions>()(
  persist(
    (set) => ({
      tasks: [],

      addTask: (title: string, description?: string) =>
        set((state) => ({
          tasks: [...state.tasks, { id: "1", title, description, status: "TODO" }]
        })),

      removeTask: (id: string) =>
        set((state) => ({
          tasks: state.tasks.filter((task) => task.id !== id)
        })),
    }),

    { name: "task-store", skipHydration: true }
  )
);

zu

const { tasks, addTask, removeTask } = useTaskStore();

6. Tanstack Query Snippets

tcq

export const useGetAllUsersApi = () => {
  return useQuery({
    queryKey: ["user"],
    queryFn: async () => await fetch("/api/users").then((res) => res.json()),
  });
};

tuq

const { data, isLoading, error } = useGetAllUsersApi();

tcm

export const useCreateUserApi = () => {
  return useMutation({
    mutationFn: async (body: UserSchemaData) => {
      return await fetch("/api/users",{
        method: "POST",
        body: JSON.stringify(body),
        headers: {
          "Content-Type": "application/json",
        },
      }).then((res) => res.json());
    },
    onSuccess: (data, variables, context) => {
      <!-- toast.success("User created successfully"); -->
      return data;
    },
    onError: (error, variables, context) => {
      <!-- toast.error(error.message); -->
    },
  });
}

tum
```
const { mutate } = useCreateUserApi();
```

7. Redux-Toolkit Snippets

usl

const data = useSelector((state) => state.slice.data);

udis
```
const dispatch = useDispatch();
```

red

userClearData: (state,action) => {
   state.edit = false;
   state.user = null;
   state.loading = false;
},

ered

builder.addCase(getAllUsers.pending, (state) => {
  state.loadingUsers = true;
});
builder.addCase(getAllUsers.fulfilled, (state, action) => {
  state.loadingUsers = false;
  state.users = action.payload.users;
  state.count = action.payload.count;
  state.next = action.payload.next;
});

builder.addCase(getAllUsers.rejected, (state) => {
  state.loadingUsers = false;
});

asthunk

export const getUsers = createAsyncThunk(
  "users/getUsers",
  async (value, { rejectWithValue }) => {
    const { postsPerPage, status, loanType } = value;
    try {
      const { data } = await API.getUsers(postsPerPage, status, loanType);
      return data;
    } catch (error) {
      return rejectWithValue(error);
    }
  }
);

8. ShadCn Snippets

sniaccordion

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

snaccordion

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

snialert

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

snalert

<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

snialertdialog

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogBody,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

snalertdialog

<AlertDialog>
  <AlertDialogOverlay>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Alert</AlertDialogTitle>
        <AlertDialogDescription>
          This is an alert — check it out!
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogBody>
        <p>
          Get a notification when your website visitors arrive at your website.
        </p>
        <p>This alert can be dismissed.</p>
      </AlertDialogBody>
      <AlertDialogFooter>
        <AlertDialogAction>Learn more</AlertDialogAction>
        <AlertDialogAction
          onClick={() => {
            setOpen(false);
          }}
        >
          Dismiss
        </AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialogOverlay>
</AlertDialog>

sniaspectratio

import { AspectRatio } from "@/components/ui/aspect-ratio";

snaspectratio

<AspectRatio ratio={16 / 9}>
  <img
    src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
    alt="mountain"
  />
</AspectRatio>

sniavatar

import { Avatar } from "@/components/ui/avatar";

snavatar

<Avatar
  src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
  alt="mountain"
/>

snibadge

import { Badge } from "@/components/ui/badge";

snbadge

<Badge>1</Badge>

snibreadcrumb

import { Breadcrumb, BreadcrumbItem } from "@/components/ui/breadcrumb";

snbreadcrumb

<Breadcrumb>
  <BreadcrumbItem href="#">Home</BreadcrumbItem>
  <BreadcrumbItem href="#">Library</BreadcrumbItem>
  <BreadcrumbItem href="#">Data</BreadcrumbItem>
  <BreadcrumbItem href="#">Bootstrap</BreadcrumbItem>
</Breadcrumb>

snibutton

import { Button } from "@/components/ui/button";

snbutton

<Button>Button</Button>

snicalendar

import { Calendar } from "@/components/ui/calendar";

sncalendar

<Calendar />

snicard

import { Card, CardBody, CardHeader } from "@/components/ui/card";

sncard

<Card>
  <CardHeader>
    <CardTitle>Card title</CardTitle>
    <CardDescription>
      This is a wider card with supporting text below as a natural lead-in to
      additional content. This content is a little bit longer.
    </CardDescription>
  </CardHeader>
  <CardBody>
    <CardTitle>Card title</CardTitle>
    <CardDescription>
      This card has supporting text below as a natural lead-in to additional
      content.
    </CardDescription>
  </CardBody>
</Card>

snicarousel

import { Carousel, CarouselItem } from "@/components/ui/carousel";

sncarousel

<Carousel>
  <CarouselItem>
    <img
      src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
      alt="mountain"
    />
  </CarouselItem>
  <CarouselItem>
    <img
      src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
      alt="mountain"
    />
  </CarouselItem>
  <CarouselItem>
    <img
      src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
      alt="mountain"
    />
  </CarouselItem>
  <CarouselItem>
    <img
      src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
      alt="mountain"
    />
  </CarouselItem>
</Carousel>

snichart

import { Chart } from "@/components/ui/chart";

snchart

<Chart />

snicheckbox

import { Checkbox } from "@/components/ui/checkbox";

sncheckbox

<Checkbox>Checkbox</Checkbox>

snicollapsible

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

sncollapsible

<Collapsible>
  <CollapsibleTrigger>Is it accessible?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. It adheres to the WAI-ARIA design pattern.
  </CollapsibleContent>
</Collapsible>

snicombobox

import {
  Combobox,
  ComboboxInput,
  ComboboxList,
  ComboboxOption,
  ComboboxOptionText,
} from "@/components/ui/combobox";

sncombobox

<Combobox>
  <ComboboxInput placeholder="Search..." />
  <ComboboxList>
    <ComboboxOption value="option-1">
      <ComboboxOptionText>Option 1</ComboboxOptionText>
    </ComboboxOption>
    <ComboboxOption value="option-2">
      <ComboboxOptionText>Option 2</ComboboxOptionText>
    </ComboboxOption>
    <ComboboxOption value="option-3">
      <ComboboxOptionText>Option 3</ComboboxOptionText>
    </ComboboxOption>
  </ComboboxList>
</Combobox>

snicommand

import {
  Command,
  CommandGroup,
  CommandInput,
  CommandList,
  CommandItem,
  CommandShortcut,
} from "@/components/ui/command";

sncommand

<Command>
  <CommandGroup>
    <CommandInput placeholder="Search..." />
    <CommandList>
      <CommandItem>
        <CommandShortcut>⌘</CommandShortcut>
        <CommandText>New</CommandText>
      </CommandItem>
      <CommandItem>
        <CommandShortcut>⌘</CommandShortcut>
        <CommandText>Open</CommandText>
      </CommandItem>
      <CommandItem>
        <CommandShortcut>⌘</CommandShortcut>
        <CommandText>Save</CommandText>
      </CommandItem>
      <CommandItem>
        <CommandShortcut>⌘⇧</CommandShortcut>
        <CommandText>Find</CommandText>
      </CommandItem>
    </CommandList>
  </CommandGroup>
</Command>

snicontextmenu

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

sncontextmenu

<ContextMenu>
  <ContextMenuTrigger>
    <button>Context menu</button>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Undo</ContextMenuItem>
    <ContextMenuItem>Redo</ContextMenuItem>
    <ContextMenuItem>Cut</ContextMenuItem>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Paste</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Better SnippetX

Welcome to SnippetX

JavaScript | React | React-Native | Expo Router | Zustand | Tanstack Query | Redux-Toolkit | ShadCn

Features

1. JavaScript Snippets

clg

clo

cls

jmap

jfilter

jfind

jparse

jsfy

2. React Snippets

rfc

rfce

rfca

us

ue

od

rmap

rfilter

rfind

rtern

3. React-Native Snippets

rnf

rnfs

4. Expo Router Snippets

ers

ert

erd

ertl

ersl

erdl

5. Zustand Snippets

zs

zu

6. Tanstack Query Snippets

tcq

tuq

tcm

tum

7. Redux-Toolkit Snippets

usl

udis

red

ered

asthunk

8. ShadCn Snippets

sniaccordion

snaccordion

snialert

snalert

snialertdialog

snalertdialog

sniaspectratio

snaspectratio

sniavatar

snavatar

snibadge

snbadge

snibreadcrumb

snbreadcrumb

snibutton

snbutton

snicalendar

sncalendar

snicard

sncard

snicarousel

sncarousel

snichart

snchart

snicheckbox

sncheckbox

snicollapsible

sncollapsible

snicombobox

sncombobox

snicommand