Welcome to SnippetX

This is simple and minimal extension alternative to ES7+ React/Redux/React-Native snippets
No unnecessary snippets.
Only useful snippets.

Features

JavaScript Snippets
- clg
- clg
- clo
- cls
- jmap
- jfilter
- jfind
- jparse
- jsfy
React Snippets
- rfc
- rfce
- rfca
- us
- ue
- od
- rmap
- rfind
- rfilter
- rtern
Redux-Toolkit Snippets
- usl
- udis
- red
- ered
- asthunk
React-Native Snippets
Zustand Snippets
- zs
- zu
Tanstack Snippets
- tcq
- tuq
- tcm
- tum

0. JavaScript Snippets

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

))
```

filter

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

))

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

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

1. 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}
```

2. 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);
    }
  }
);

3. React-Native Snippets

rnf

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

export default class App extends Component {
  render() {
    return (
      <View>
        <Text>App</Text>
      </View>
    );
  }
}

rnfs

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

export default class App extends Component {
  render() {
    return (
      <View>
        <Text>App</Text>
      </View>
    );
  }
}

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

4. 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();

5. Tanstack 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();
```

6. 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>

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
media		media
test		test
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
README.md		README.md
extension.js		extension.js
jsconfig.json		jsconfig.json
package-lock.json		package-lock.json
package.json		package.json
publish.md		publish.md
snippetx-1.2.0.vsix		snippetx-1.2.0.vsix
snippetx.json		snippetx.json
vsc-extension-quickstart.md		vsc-extension-quickstart.md

madanbazgai/SnippetX

Folders and files

Latest commit

History

Repository files navigation

Welcome to SnippetX

Features

0. JavaScript Snippets

clg

clo

cls

jmap

filter

find

jparse

jsfy

1. React Snippets

rfc

rfce

rfca

us

ue

od

rmap

rfilter

rfind

rtern

2. Redux Toolkit Snippets

usl

udis

red

ered

asthunk

3. React-Native Snippets

rnf

rnfs

4. Zustand Snippets

zs

zu

5. Tanstack Snippets

tcq

tuq

tcm

tum

6. 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

sncommand

snicontextmenu

sncontextmenu

About