React Snippets

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

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 file for details.

---

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