https://github.com/malnati/react-use-config

Provides a hook called useConfigParam to retrieve configuration parameters with priority: URL query, environment variables, and default value. It simplifies configuration management, enabling flexibility and adaptability across different environments and scenarios.
https://github.com/malnati/react-use-config

adaptive config-management developer-tools dynamic-configuration environment-variables hook javascript npm param react settings tested typescript url-parameters

Last synced: 4 days ago
JSON representation

Provides a hook called useConfigParam to retrieve configuration parameters with priority: URL query, environment variables, and default value. It simplifies configuration management, enabling flexibility and adaptability across different environments and scenarios.

• Host: GitHub
• URL: https://github.com/malnati/react-use-config
• Owner: Malnati
• License: mit
• Created: 2024-12-12T17:16:23.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2025-03-10T19:21:20.000Z (about 2 months ago)
• Last Synced: 2025-03-29T18:36:32.217Z (28 days ago)
• Topics: adaptive, config-management, developer-tools, dynamic-configuration, environment-variables, hook, javascript, npm, param, react, settings, tested, typescript, url-parameters
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-use-config
• Size: 897 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: .github/SECURITY.md

Awesome Lists containing this project

README

        

# react-use-config

`react-use-config` is a React Hook (`useConfigParam`) for dynamically retrieving configuration parameters with well-defined priorities.

![Build Status](https://img.shields.io/badge/build-passing-brightgreen)

![License](https://img.shields.io/badge/license-MIT-blue)

![Coverage](https://img.shields.io/codecov/c/github/Malnati/react-use-config)

![Version](https://img.shields.io/npm/v/react-use-config)

![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen)

![Downloads](https://img.shields.io/npm/dt/react-use-config)

---

## Features

The `useConfigParam` hook retrieves parameter values in the following priority order:

1. **Query Parameter**: Retrieved directly from the URL.

2. **Environment Variable**: Defined in the `.env` file (prefixed with `REACT_APP_`).

3. **Default Value**: A fallback provided by the user.

---

### Visual Overview

#### Streamlining React Configurations

![Streamlining React Configurations](https://raw.githubusercontent.com/Malnati/react-use-config/main/docs/Streamlining-React-Configurations.png)

#### Features Enhancing `useConfigParam`

![Features Enhancing useConfigParam Hook](https://raw.githubusercontent.com/Malnati/react-use-config/main/docs/Features-Enhancing-useConfigParam-Hook.png)

#### Configuration Retrieval Funnel

![Configuration Value Retrieval Funnel](https://raw.githubusercontent.com/Malnati/react-use-config/main/docs/Configuration-Value-Retrieval-Funnel.png)

---

## Usage Example

```javascript

import useConfigParam from 'react-use-config';

// Retrieve the 'geoServer' parameter with a default value

const geoServer = useConfigParam('geoServer', 'http://localhost:8080/geoserver/isagro/wms');

// Retrieve the 'showMap' parameter with a default value

const showMap = useConfigParam('showMap', true);

```

---

## Benefits

- **Flexibility**: Enables dynamic configurations based on environment variables and URLs.

- **Simplicity**: Reduces complexity in configuration management.

- **Convenience**: Easy integration with React projects using React Router.

---

## Installation

Add the repository to your project with:

```bash

npm install react-use-config

```

---

## Learn More

For additional details and a live preview of this project, visit the [React Use Config GitHub Page](https://malnati.github.io/react-use-config).

---

## Contributing

We welcome contributions! Follow these steps:

1. Fork the project.

2. Create a branch for your feature/bugfix (`git checkout -b my-feature`).

3. Commit your changes (`git commit -m 'My new feature'`).

4. Push to the branch (`git push origin my-feature`).

5. Open a pull request.

---

## License

MIT

---

🚀 Built with ❤️ by **Ricardo Malnati** and the amazing open-source community!