Merge pull request #122 from BetterTyped/docs/fix

Docs fix

Author: GerasNyx

documentation/blog/migrations/migrate-to-7.0.md

@@ -119,9 +119,9 @@ All React hooks (`useFetch`, `useSubmit`, etc.) have been updated to align with
 improvement, TypeScript will now raise an error if you attempt to dispatch a request without setting all required
 parameters (e.g., URL params, payload), preventing runtime errors.
 
-### Provider Renamed: `<ConfigProvider />` → `<HyperFetchProvider />`
+### Provider Renamed: `<ConfigProvider />` → `<Provider />`
 
-For better clarity and naming consistency, the `<ConfigProvider />` has been renamed to `<HyperFetchProvider />`. You'll
+For better clarity and naming consistency, the `<ConfigProvider />` has been renamed to `<Provider />`. You'll
 need to update this in your application's component tree.
 
 ```tsx
@@ -135,10 +135,10 @@ const App = () => {
 // code-editor-split
 
 // Now
-import { HyperFetchProvider } from "@hyper-fetch/react";
+import { Provider } from "@hyper-fetch/react";
 
 const App = () => {
-  return <HyperFetchProvider>...</HyperFetchProvider>;
+  return <Provider>...</Provider>;
 };
 ```
 

documentation/docs/guides/react/01-basics/config-provider.mdx

@@ -1,25 +1,25 @@
 ---
-title: Guide - React - Config Provider
+title: Guide - React - Provider
 sidebar_label: ConfigProvider
 ---
 
 # React Config Provider
 
-In Hyper-fetch, you can set default configurations for hooks using the `<ConfigProvider />` component. This allows you
+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.
 
 :::secondary What you'll learn
 
-1.  How to use the **`<ConfigProvider />`** to set **global configurations** for Hyper-fetch hooks.
+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 `<ConfigProvider />` acts as a context wrapper. You should place it at the root of your component tree, for example
+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.
 
@@ -28,7 +28,7 @@ Here's how you can wrap your application with it:
 ```tsx
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { ConfigProvider } from "@hyper-fetch/react";
+import { Provider } from "@hyper-fetch/react";
 
 // 1. Define your custom configuration
 const customConfig = {
@@ -50,13 +50,13 @@ function App() {
   return <div>...</div>;
 }
 
-// 2. Wrap your app with the ConfigProvider
+// 2. Wrap your app with the Provider
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <ConfigProvider config={customConfig}>
+    <Provider config={customConfig}>
       <App />
-    </ConfigProvider>
+    </Provider>
   </React.StrictMode>,
 );
 ```
@@ -68,7 +68,7 @@ ensuring that your application maintains a consistent user experience with minim
 
 :::success Congratulations!
 
-You've learned how to use the `<ConfigProvider />` to manage global settings for Hyper-fetch hooks in React!
+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.

documentation/docs/guides/react/01-basics/refreshing.mdx

@@ -14,7 +14,7 @@ page. Hyper-fetch provides a simple and efficient way to achieve this with the `
 1.  How to **automatically refresh** data at a set interval.
 2.  How to use the **`refresh`** and **`refreshTime`** options in `useFetch`.
 3.  How to create a **live-updating component** to display fresh data.
-4.  How to use **`DateInterval`** for clear and readable time definitions.
+4.  How to use **`Time`** enum for clear and readable time definitions.
 
 :::
 
@@ -27,13 +27,15 @@ You can turn any `useFetch` hook into a polling mechanism by setting the `refres
 {/* We'll also display a "Last Updated" timestamp to show the refresh in action. */}
 
 ```tsx
+import { Time } from "@hyper-fetch/core"
+
 function LiveActivityFeed() {
   const [lastUpdated, setLastUpdated] = React.useState(new Date());
 
   // highlight-start
   const { data: activities, loading } = useFetch(getActivities, {
     refresh: true,
-    refreshTime: DateInterval.second * 5,
+    refreshTime: Time.second * 5,
     onSuccess: () => {
       setLastUpdated(new Date());
     },
@@ -65,8 +67,8 @@ function LiveActivityFeed() {
 ### How It Works
 
 1.  **`refresh: true`**: This option enables the auto-refreshing feature for the hook.
-2.  **`refreshTime: DateInterval.second * 5`**: This sets the polling interval. We specify that the data should be
-    re-fetched every 5000 milliseconds (5 seconds). Using the `DateInterval` enum from `@hyper-fetch/core` makes the
+2.  **`refreshTime: Time.second * 5`**: This sets the polling interval. We specify that the data should be
+    re-fetched every 5000 milliseconds (5 seconds). Using the `Time` enum from `@hyper-fetch/core` makes the
     time definition more readable than just `5000`.
 3.  **`onSuccess` callback**: We use the `onSuccess` callback to update a `lastUpdated` state variable every time a
     successful refresh occurs. This allows us to give visual feedback to the user that the data is fresh.
@@ -84,6 +86,6 @@ You've learned how to keep your application's data fresh with auto-refreshing!
 - You can enable **automatic polling** for any `useFetch` hook.
 - You know how to configure the **refresh interval** using `refreshTime`.
 - You can provide **visual feedback** to users to show when data was last updated.
-- You can use the helpful **`DateInterval`** enum for readable time values.
+- You can use the helpful **`Time`** enum for readable time values.
 
 :::

documentation/docs/guides/react/01-basics/window-focus-blur.mdx

@@ -27,10 +27,11 @@ then try interacting with the browser window (e.g., switch to another tab and co
 tools to simulate being offline and online.
 
 ```tsx
+import { Time } from "@hyper-fetch/core"
 function WindowEventsDemo() {
   const [options, setOptions] = React.useState({
     refresh: true,
-    refreshTime: DateInterval.second * 5,
+    refreshTime: Time.second * 5,
     refreshOnFocus: true,
     refreshOnBlur: false,
     refreshOnReconnect: true,

packages/react/src/provider/provider.tsx

@@ -8,7 +8,7 @@ const ConfigContext = React.createContext<ProviderValueType>({
 });
 
 /**
- * Context provider with configuration for hooks
+ * Provider with configuration for hooks
  * @param options
  * @returns
  */