Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/adityavijay21/reactsnipp

📦 50+ carefully crafted react snippets. React Snipp ~ Snippets you need.
https://github.com/adityavijay21/reactsnipp

adityavijay21 reactjs reactjs-snippets vscode vscode-extension vscode-react

Last synced: 3 months ago
JSON representation

📦 50+ carefully crafted react snippets. React Snipp ~ Snippets you need.

Awesome Lists containing this project

README 

        
## React Snippets



[![Install Now](/images/readmeheader.png)](https://marketplace.visualstudio.com/items?itemName=adityavijay21.ReactSnipp)



A collection of React code snippets to boost your productivity. Covers modern practices, hooks, and more!



![GIF](/images/readmeuse.gif)



##   Getting Started



### Installation



1. Open your code editor (VS Code, Sublime Text, WebStorm)

2. Navigate to the snippets or user preferences section

3. Copy the contents of the `react-snippets.json` file

4. Paste into your user snippets file for JavaScript React



**For VS Code Users:**



1. Press `Ctrl+Shift+P` (Windows/Linux) or `Cmd+Shift+P` (Mac)

2. Type "Configure User Snippets" and select it

3. Choose "javascriptreact.json"

4. Paste the snippets into this file



##   Snippets



Explore a collection of helpful snippets categorized by functionality:



| Prefix | Description |

|---|---|

| **Basic Imports** |  |

| `imr` | Import React |

| `imrc` | Import React and Component |

| `imrd` | Import ReactDOM |

| `imrs` | Import React and useState |

| `imrse` | Import React, useState, and useEffect |

| `impt` | Import PropTypes |

| `impc` | Import React and PureComponent |

| **Components** |  |

| `cc` | Class Component |

| `ffc` | Function Component |

| `afc` | Arrow Function Component |

| `rmc` | React.memo Component |

| `tsrc` | TypeScript React Component |

| **Hooks** |  |

| `ush` | useState Hook |

| `ueh` | useEffect Hook |

| `uch` | useContext Hook |

| `umh` | useMemo Hook |

| `uch` | useCallback Hook |

| `urh` | useReducer Hook |

| `urefh` | useRef Hook |

| `uih` | useImperativeHandle Hook |

| `uleh` | useLayoutEffect Hook |

| **Custom Hooks** |  |

| `cuh` | Custom Hook |

| `cuht` | Custom Hook with TypeScript |

| `crht` | Custom React Hook with TypeScript |

| `rceh` | React Custom Event Hook |

| **Props and Types** |  |

| `pt` | PropTypes declaration |

| `dp` | defaultProps declaration |

| **Styling** |  |

| `sc` | Styled component |

| `thp` | Theme Provider |

| **State Management** |  |

| `rac` | Redux Action Creator |

| `rr` | Redux Reducer |

| `cp` | Context Provider |

| `rctx` | React Context with TypeScript |

| `rca` | Recoil Atom |

| `rcs` | Recoil Selector |

| **Routing** |  |

| `rrs` | React Router Setup |

| **Testing** |  |

| `rtl` | React Testing Library Test |

| **Next.js** |  |

| `nxp` | Next.js Page |

| **React Native** |  |

| `rnc` | React Native Component |

| **Forms** |  |

| `frm` | Formik Form |

| **Error Handling** |  |

| `eb` | Error Boundary |

| `reb` | React Error Boundary with Fallback UI |

| **Performance Optimization** |  |

| `hoc` | Higher-Order Component |

| `rfr` | React.forwardRef |

| **Data Fetching** |  |

| `gql` | GraphQL Query |

| `rqh` | React Query Hook |

| `apif` | API Fetch |

| **Miscellaneous** |  |

| `sbst` | Storybook Story |

| `rpt` | React Portal |

| `rlz` | React.lazy with Suspense |



Use these prefixes in your code editor to quickly generate the corresponding React code snippets.



##   Contributing



We welcome contributions! If you have a suggestion:



1. Fork the repository

2. Create a feature branch

3. Commit your changes

4. Push to the branch

5. Open a Pull Request



##   License



This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.



---



Happy coding!  ✨ Don't forget to star this repo if you find it useful!