react-config-hook

A React hook for managing dynamic backend URLs and configurations in React applications. This package helps you manage your service endpoints dynamically without hardcoding URLs.

📚 Documentation

Before installing, please read the complete documentation at: Dynamic URL Management Documentation

🚀 Installation

npm install react-config-hook
# or
yarn add react-config-hook

⚡ Quick Usage

import { useConfig } from 'react-config-hook';

function App() {
  const { config, error, loading } = useConfig();

  if (loading) return <div>Loading configuration...</div>;
  if (error) return <div>Error: {error}</div>;

  // Access your service URL
  const serviceUrl = config.ms; // Replace 'ms' with your service key

  return <div>Service URL: {serviceUrl}</div>;
}

⚙️ Environment Setup

REACT_APP_APP_NAME=Your_App_Name_From_Admin_Panel
REACT_APP_ENVIRONMENT=Your_Environment_From_Admin_Panel
REACT_APP_CONFIG_API_KEY=Your_API_Key

For Next.js projects, use NEXT_PUBLIC_ prefix instead of REACT_APP_ .

🔑 Getting Your API Key

• Click here to visit the Dynamic URL Management Admin Panel
• Log in with your credentials
• Navigate to your project settings
• Copy your API key
• Add it to your .env file

🌟 Features

• Dynamic backend URL management
• Environment-based configuration
• Automatic error handling
• Loading state management
• TypeScript support
• React and Next.js compatibility

💡 Example Usage with Axios

import { useConfig } from 'react-config-hook';
import axios from 'axios';

function UserService() {
  const { config, error, loading } = useConfig();

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

  const handleLogin = async (username, password) => {
    try {
      const response = await axios.post(`${config.authService}/login`, {
        username,
        password
      });
      // Handle response
    } catch (err) {
      // Handle error
    }
  };

  return <div>Your component JSX</div>;
}

📝 License

MIT

🤝 Support

• Email: [email protected]
• GitHub: Hjgaming
• Discord Community: Join Here

⚠️ Important Note

Make sure to check the full documentation for:

- Detailed setup instructions
- Advanced usage examples
- Troubleshooting guide
- Best practices
- API reference

This README now includes:
1. Clear installation instructions
2. Link to the main documentation
3. Quick start guide
4. Environment setup
5. Example usage
6. Support information
7. Important features
8. Proper formatting and emojis for better readability