Simplify Your API Calls in React with em-use-controller

#webdev #programming #react #opensource

Sick of writing the same fetch or axios boilerplate over and over? 💀

Meet em-use-controller – a tiny but powerful utility for React, and supported for other SPAs that turns your REST API routes into declarative, type-safe controller functions.

const getUser = useController('getUser');

const result = await getUser({
  method: 'GET',
  pathParams: { id: 123 },
  auth: { type: 'bearer', token },
});

🎯 No more:

Hardcoded URLs
Manual query string building
Duplicated headers/auth logic
Messy error handling

🚀 How it Works
Define your routes once in a config file:

export default {
  getUser: '/api/users/:id',
  updateUser: '/api/users/:id',
};

Set global defaults for headers, baseURL, and error handling:

setControllerDefaults(config, {
  baseURL: 'https://api.myapp.dev',
  headers: { 'Content-Type': 'application/json' },
  errorHandler: (e) => console.error('API Error', e),
});

Call any endpoint with one-liners using useController.

🛠 Features

✅ Works with all HTTP methods

✅ Handles path + query params

✅ Supports Bearer & custom auth

✅ Built-in global error handling

✅ Swappable axios instance

✅ Upload files with FormData

🧠 Ideal For:

Frontend devs (React, other SPAs, tested on react based) using RESTful APIs (especially .NET/Java/Spring/Node)
Anyone who hates repeated boilerplate
Teams that want cleaner, safer API usage

📦 Try it Out