React Config Provider

In Hyper-fetch, you can set default configurations for hooks using the <Provider /> component. This allows you to create a consistent behavior for data fetching and submission across your entire application, avoiding repetitive setup in individual components.

What you'll learn

1. How to use the <Provider /> to set global configurations for Hyper-fetch hooks.
2. What are the configurable options for useFetch and useSubmit.
3. How to structure your application to use the provider effectively.

Setup

The <Provider /> acts as a context wrapper. You should place it at the root of your component tree, for example in your main App.tsx or index.tsx file. It takes a config prop where you can specify default settings for all Hyper-fetch hooks.

Here's how you can wrap your application with it:

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "@hyper-fetch/react";

// 1. Define your custom configuration
const customConfig = {
  useFetchConfig: {
    // Default options for all useFetch instances
    revalidateOnFocus: true,
    bounce: true,
    bounceTime: 200,
  },
  useSubmitConfig: {
    // Default options for all useSubmit instances
    debounce: true,
    debounceTime: 300,
  },
};

function App() {
  // Your application components go here
  return <div>...</div>;
}

// 2. Wrap your app with the Provider
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider config={customConfig}>
      <App />
    </Provider>
  </React.StrictMode>,
);

The config prop gives you granular control over the default behavior of useFetch, useSubmit, and other hooks, ensuring that your application maintains a consistent user experience with minimal boilerplate.

---

Congratulations!

You've learned how to use the <Provider /> to manage global settings for Hyper-fetch hooks in React!

• You can set default options for useFetch and useSubmit across your app.
• You can centralize configuration to keep your components cleaner.
• You are able to create a consistent behavior for data fetching throughout your application.