Welcome to SnippetX

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

Features

0. JavaScript Snippets

   • clg
   • clg
   • clo
   • cls
   • jmap
   • jfilter
   • jfind
   • jparse
   • jsfy

1. React Snippets

   • rfc
   • rfce
   • rfca
   • us
   • ue
   • od
   • rmap
   • rfind
   • rfilter
   • rtern

2. Redux-Toolkit Snippets

   • usl
   • udis
   • red
   • ered
   • asthunk

3. React-Native Snippets

   • rnf
   • rnfs

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",
    },
  });