Integrating TanStack Config with React Context for State Sharing

Illustrate the process of combining TanStack Config with React Context API to share state efficiently across multiple components without prop drilling.

import React, { createContext, useContext, useState } from 'react';
import { useConfig } from 'tanstack-config-react';

This code imports necessary React hooks and the useConfig hook from TanStack Config to manage configuration within a React context.

const ConfigContext = createContext();

Here, we create a new React context for our configuration. This context will allow us to share configuration state across components.

export const ConfigProvider = ({ children }) => {
  const { config } = useConfig(); // Retrieve configuration using TanStack Config
  return (
    <ConfigContext.Provider value={config}>
      {children}
    </ConfigContext.Provider>
  );
};

Defines a provider component that uses the useConfig hook from TanStack Config to get the current configuration and provides it to the rest of the app through the created context.

export const useAppConfig = () => useContext(ConfigContext);

Creates a custom hook that allows any component in the application to easily access the configuration by using the useContext hook with our ConfigContext.

// In your component
const ComponentUsingConfig = () => {
  const config = useAppConfig(); // Access configuration
  return <div>{config.someSetting}</div>;
};

This demonstrates how a component can use the useAppConfig custom hook to access and use the configuration stored in the context, without needing to pass props directly.