{"id":20995109,"url":"https://github.com/blackboxvision/react-use-config","last_synced_at":"2025-05-14T21:31:00.010Z","repository":{"id":85769435,"uuid":"289483078","full_name":"BlackBoxVision/react-use-config","owner":"BlackBoxVision","description":"Custom Provider and Hook for managing config in React Apps","archived":false,"fork":false,"pushed_at":"2020-08-23T16:23:35.000Z","size":180,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-20T17:19:44.447Z","etag":null,"topics":["configuration-management","hooks","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BlackBoxVision.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-08-22T12:23:37.000Z","updated_at":"2024-12-09T21:09:46.000Z","dependencies_parsed_at":"2023-06-26T01:43:03.861Z","dependency_job_id":null,"html_url":"https://github.com/BlackBoxVision/react-use-config","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"f986e973b3fde4e76dccf2f16fe792e03a3f5c34"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-use-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-use-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-use-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-use-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlackBoxVision","download_url":"https://codeload.github.com/BlackBoxVision/react-use-config/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254230817,"owners_count":22036248,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["configuration-management","hooks","react","react-native"],"created_at":"2024-11-19T07:21:43.298Z","updated_at":"2025-05-14T21:30:57.892Z","avatar_url":"https://github.com/BlackBoxVision.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Use Config [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)\n\n:rocket: Custom Provider and Hook for managing config in React Apps.\n\n## Table of contents\n\n- [Use Case](#use-case)\n- [Compatibility](#compatibility)\n- [Installation](#installation)\n  - [NPM](#npm)\n  - [YARN](#yarn)\n- [Example Usage](#example-usage)\n- [Provider API](#component-api)\n- [useConfig API](#hooks-api)\n- [Issues](#issues)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Use case\n\nYou need a proper way to access config from your react components and custom hooks.\n\n## Compatibility\n\nOur package currently supports apps with **React \u003e= 16.8.0**. You can use this package for React and React Native Apps.\n\n## Installation\n\nYou can install this library via NPM or YARN.\n\n### NPM\n\n```bash\nnpm i @blackbox-vision/react-use-config\n```\n\n### YARN\n\n```bash\nyarn add @blackbox-vision/react-use-config\n```\n\n## Example Usage\n\nAfter reading and performing the previous steps, you should be able to import the library and use it like in this example:\n\n1. Define the `config` and wrap your App in `ConfigProvider`:\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { ConfigProvider } from '@blackbox-vision/react-use-config';\n\nimport Header from './Header';\n\nconst config = {\n  logo: 'https://xyz.com/logo.png',\n};\n\nconst App = () =\u003e (\n  \u003cConfigProvider config={config} debug={false}\u003e\n    \u003cHeader /\u003e\n  \u003c/ConfigProvider\u003e\n);\n\nexport default App;\n```\n\n2. Import the `hook` and consume the config part you really need:\n\n```javascript\nimport React from 'react';\nimport { useConfig } from '@blackbox-vision/react-use-config';\n\nconst Header = (props) =\u003e {\n  const logoUri = useConfig(config =\u003e config?.logo);\n\n  return (\n    \u003cdiv\u003e\n      \u003cimg src={logoUri} /\u003e\n      {...}\n    \u003c/div\u003e\n  );\n};\n\nexport default Header;\n```\n\n## Component API\n\nThe `ConfigProvider` component has the following props:\n\n| Properties | Types    | Default Value | Description                                   |\n| ---------- | -------- | ------------- | --------------------------------------------- |\n| config     | object   | none          | Property that represents the config object    |\n| getConfig  | function | none          | Property that a function to load config async |\n| debug      | boolean  | false         | Property that enables debug mode              |\n\n## Hooks API\n\n### useConfig\n\nThe `useConfig` hook lets you retrieve the full config object or a specific config part using a selector.\n\n#### Parameters\n\nThe hook receives the following parameters:\n\n- `selector`: It's an optional function that gives you the config and let you return an specific value that will be memoized.\n\n#### Return Value\n\nIf you pass the `selector` to the `useConfig` hook you'll receive an specific config item. In case you didn't, you'll only receive the fully config object.\n\n## Issues\n\nPlease, open an [issue](https://github.com/BlackBoxVision/react-use-config/issues) following one of the issues templates. We will do our best to fix them.\n\n## Contributing\n\nIf you want to contribute to this project see [contributing](https://github.com/BlackBoxVision/react-use-config/blob/master/CONTRIBUTING.md) for more information.\n\n## License\n\nDistributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/react-use-config/blob/master/LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Freact-use-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblackboxvision%2Freact-use-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Freact-use-config/lists"}