React Easy Snippets

A collection of useful React & React TypeScript snippets for faster development of components, context providers, state management, and data fetching.

Features

• React Context Provider (JavaScript & TypeScript)
• useState with object updater
• Axios or Fetch async data fetching with loading, error, and pagination handling
• Inline conditional map rendering

Usage

1. Open a .tsx or .jsx file
2. Type the snippet prefix, for example:

Context Providers

• context-javscript → Creates a React Common Context Provider (JavaScript) with a custom hook for consuming the context.
• context-typescript → Creates a React TypeScript Context Provider with typed state, custom hook, and comments.

State Management

• state-with-object → Initializes useState with an object containing isLoading, data, pagination, search, error and generates an updater function.

Data Fetching

• data-fetch-use-axios → Async fetch function using Axios with automatic loading, error, and pagination updates.
• data-fetch-use-fetch → Async fetch function using Fetch API with automatic loading, error, and pagination updates.

Rendering

• data-map → Inline conditional map render for arrays.

3. Press Enter to expand the snippet, then customize variables like state names, API URLs, or types as needed.

Author

Md Sabbir Hosain Contact: contact.sabbirhosain@gmail.com