{"id":21700508,"url":"https://github.com/adityavijay21/reactsnipp","last_synced_at":"2025-04-12T13:34:37.547Z","repository":{"id":62951762,"uuid":"361319949","full_name":"adityavijay21/reactsnipp","owner":"adityavijay21","description":" 📦 50+ carefully crafted react snippets.","archived":false,"fork":false,"pushed_at":"2024-08-23T20:43:58.000Z","size":4894,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T08:08:33.470Z","etag":null,"topics":["adityavijay21","reactjs","reactjs-snippets","vscode","vscode-extension","vscode-react"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=adityavijay21.ReactSnipp","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adityavijay21.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-04-25T03:15:19.000Z","updated_at":"2024-10-30T20:39:09.000Z","dependencies_parsed_at":"2023-12-21T06:28:17.345Z","dependency_job_id":"1da8e142-9c13-44ba-8da3-946e218247f9","html_url":"https://github.com/adityavijay21/reactsnipp","commit_stats":null,"previous_names":["adityavijay21/kiriotheo","adityavijay21/reactsnipp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adityavijay21%2Freactsnipp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adityavijay21%2Freactsnipp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adityavijay21%2Freactsnipp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adityavijay21%2Freactsnipp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adityavijay21","download_url":"https://codeload.github.com/adityavijay21/reactsnipp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248573613,"owners_count":21126869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adityavijay21","reactjs","reactjs-snippets","vscode","vscode-extension","vscode-react"],"created_at":"2024-11-25T20:14:30.578Z","updated_at":"2025-04-12T13:34:37.509Z","avatar_url":"https://github.com/adityavijay21.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"## React Snippets\n\n[![Install Now](/images/readmeheader.png)](https://marketplace.visualstudio.com/items?itemName=adityavijay21.ReactSnipp)\n\nA collection of React code snippets to boost your productivity. Covers modern practices, hooks, and more!\n\n![GIF](/images/readmeuse.gif)\n\n##   Getting Started\n\n### Installation\n\n1. Open your code editor (VS Code, Sublime Text, WebStorm)\n2. Navigate to the snippets or user preferences section\n3. Copy the contents of the `react-snippets.json` file\n4. Paste into your user snippets file for JavaScript React\n\n**For VS Code Users:**\n\n1. Press `Ctrl+Shift+P` (Windows/Linux) or `Cmd+Shift+P` (Mac)\n2. Type \"Configure User Snippets\" and select it\n3. Choose \"javascriptreact.json\"\n4. Paste the snippets into this file\n\n\n##   Snippets\n\nExplore a collection of helpful snippets categorized by functionality:\n\n\n| Prefix | Description |\n|---|---|\n| **Basic Imports** |  |\n| `imr` | Import React |\n| `imrc` | Import React and Component |\n| `imrd` | Import ReactDOM |\n| `imrs` | Import React and useState |\n| `imrse` | Import React, useState, and useEffect |\n| `impt` | Import PropTypes |\n| `impc` | Import React and PureComponent |\n| **Components** |  |\n| `cc` | Class Component |\n| `ffc` | Function Component |\n| `afc` | Arrow Function Component |\n| `rmc` | React.memo Component |\n| `tsrc` | TypeScript React Component |\n| **Hooks** |  |\n| `ush` | useState Hook |\n| `ueh` | useEffect Hook |\n| `uch` | useContext Hook |\n| `umh` | useMemo Hook |\n| `uch` | useCallback Hook |\n| `urh` | useReducer Hook |\n| `urefh` | useRef Hook |\n| `uih` | useImperativeHandle Hook |\n| `uleh` | useLayoutEffect Hook |\n| **Custom Hooks** |  |\n| `cuh` | Custom Hook |\n| `cuht` | Custom Hook with TypeScript |\n| `crht` | Custom React Hook with TypeScript |\n| `rceh` | React Custom Event Hook |\n| **Props and Types** |  |\n| `pt` | PropTypes declaration |\n| `dp` | defaultProps declaration |\n| **Styling** |  |\n| `sc` | Styled component |\n| `thp` | Theme Provider |\n| **State Management** |  |\n| `rac` | Redux Action Creator |\n| `rr` | Redux Reducer |\n| `cp` | Context Provider |\n| `rctx` | React Context with TypeScript |\n| `rca` | Recoil Atom |\n| `rcs` | Recoil Selector |\n| **Routing** |  |\n| `rrs` | React Router Setup |\n| **Testing** |  |\n| `rtl` | React Testing Library Test |\n| **Next.js** |  |\n| `nxp` | Next.js Page |\n| **React Native** |  |\n| `rnc` | React Native Component |\n| **Forms** |  |\n| `frm` | Formik Form |\n| **Error Handling** |  |\n| `eb` | Error Boundary |\n| `reb` | React Error Boundary with Fallback UI |\n| **Performance Optimization** |  |\n| `hoc` | Higher-Order Component |\n| `rfr` | React.forwardRef |\n| **Data Fetching** |  |\n| `gql` | GraphQL Query |\n| `rqh` | React Query Hook |\n| `apif` | API Fetch |\n| **Miscellaneous** |  |\n| `sbst` | Storybook Story |\n| `rpt` | React Portal |\n| `rlz` | React.lazy with Suspense |\n\nUse these prefixes in your code editor to quickly generate the corresponding React code snippets.\n\n##   Contributing\n\nWe welcome contributions! If you have a suggestion:\n\n1. Fork the repository\n2. Create a feature branch\n3. Commit your changes\n4. Push to the branch\n5. Open a Pull Request\n\n\n##   License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n\n---\n\nHappy coding!  ✨ Don't forget to star this repo if you find it useful!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadityavijay21%2Freactsnipp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadityavijay21%2Freactsnipp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadityavijay21%2Freactsnipp/lists"}