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
   • arfce
   • us
   • ue
   • od
   • rmap
   • rfind
   • rfilter
   • rtern

2. Redux-Toolkit Snippets

   • usl
   • udis
   • red
   • ered
   • asthunk

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

• arfce

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