React Request

✨ Features

• 🎣 React Hooks - Modern React hooks API for data fetching
• 🚀 TypeScript Support - Full TypeScript support with type safety
• 💾 Built-in Caching - Automatic request caching with configurable TTL
• 🔄 Loading States - Automatic loading and progress tracking
• ❌ Error Handling - Comprehensive error handling with retry logic
• 📝 Form Integration - Seamless Formik integration for forms
• 🌐 Network Awareness - Online/offline status handling
• 🔧 Configurable - Highly customizable with global and per-request options
• 🎯 Debouncing - Built-in request debouncing (300ms)
• 📊 Progress Tracking - Upload/download progress monitoring

📦 Install

npm install @app-studio/react-request

🔨 Usage

Basic Example

import React from 'react';
import { useRequest, request } from '@app-studio/react-request';

// Define your API function
const fetchUser = (id) =>
  request({
    url: `https://api.example.com/users/${id}`,
    method: 'GET'
  });

// Use in component
function UserProfile({ userId }) {
  const { data, loading, error, run } = useRequest(fetchUser);

  React.useEffect(() => {
    run(userId);
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return null;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
}

With Provider (Recommended)

import React from 'react';
import { RequestProvider } from '@app-studio/react-request';

function App() {
  return (
    <RequestProvider
      cached={true}
      debug={true}
      defaults={{
        onError: (error) => console.error('Request failed:', error),
        onSuccess: (data) => console.log('Request succeeded:', data)
      }}
    >
      <UserProfile userId="123" />
    </RequestProvider>
  );
}

Form Integration

import { Formik, Form, Field } from 'formik';

function CreateUserForm() {
  const { formikConfig, loading, error } = useRequest(
    (userData) => request({
      url: '/api/users',
      method: 'POST',
      params: userData
    }),
    {
      method: 'POST',
      onSuccess: (data) => alert('User created successfully!')
    }
  );

  return (
    <Formik initialValues={{ name: '', email: '' }} {...formikConfig}>
      <Form>
        <Field name="name" placeholder="Name" />
        <Field name="email" placeholder="Email" />
        <button type="submit" disabled={loading}>
          {loading ? 'Creating...' : 'Create User'}
        </button>
        {error && <div>Error: {error.message}</div>}
      </Form>
    </Formik>
  );
}

TypeScript

react-request is written in TypeScript with complete definitions.

📚 Documentation

• 📖 Full Documentation - Comprehensive guide with examples
• ⚡ Quick Reference - Quick reference for common patterns
• 🔗 API Reference - Detailed API documentation
• 💡 Examples - Real-world usage examples
• 🛠️ Best Practices - Recommended patterns

🔗 Links

• Change Log
• Versioning Release Note
• Issues - Bug reports and feature requests
• Discussions - Community discussions

🤝 Contributing

We welcome all contributions! Here's how you can help:

1. 🐛 Report bugs - Create an issue
2. 💡 Suggest features - Start a discussion
3. 📝 Improve docs - Help us make the documentation better
4. 🔧 Submit PRs - Fix bugs or add new features

Development Setup

git clone https://github.com/rize-network/react-request.git
cd react-request
npm install
npm start

Running Tests

npm test

Please read our contributing guide for more details.

❤️ Sponsors and Backers

Author

SteedMonteiro, [email protected]

License

React Request is available under the MIT license. See the LICENSE file for more info.