{"_id":"@4chain-ag/react-configuration","_rev":"4-062a57a861f8c6c5080e6716ddb33a95","name":"@4chain-ag/react-configuration","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@4chain-ag/react-configuration","repository":{"type":"git","url":"git+https://github.com/4chain-AG/react-configuration.git"},"version":"1.0.0","description":"React runtime environment variables (env) configuration","main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/esm/index.d.ts","scripts":{"build":"yarn build:esm && yarn build:cjs","build:esm":"tsc","build:cjs":"tsc --module commonjs --outDir dist/cjs","test":"jest --config jestconfig.json","lint":"eslint \"{**/*,*}.{js,ts,jsx,tsx}\"","prettier":"prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\""},"keywords":["react","env","environment-variables","runtime"],"author":{"name":"kuba-4chain"},"license":"MIT","devDependencies":{"@testing-library/react":"^14.0.0","@types/jest":"^29.5.3","@types/react":"^18.2.16","@types/react-dom":"^18.2.7","@typescript-eslint/eslint-plugin":"^6.2.0","@typescript-eslint/parser":"^6.2.0","eslint":"^8.45.0","eslint-config-prettier":"^8.9.0","eslint-plugin-prettier":"^5.0.0","eslint-plugin-react":"^7.33.0","jest":"^29.6.2","jest-canvas-mock":"^2.5.2","jest-environment-jsdom":"^29.6.2","prettier":"^3.0.0","react":"^18.2.0","react-dom":"^18.2.0","ts-jest":"^29.1.1","typescript":"^5.1.6"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"dependencies":{"@types/node":"^20.4.4"},"gitHead":"f46e9bf8f623e07c0117d8ae6251419a9e62cbc2","bugs":{"url":"https://github.com/4chain-AG/react-configuration/issues"},"homepage":"https://github.com/4chain-AG/react-configuration#readme","_id":"@4chain-ag/react-configuration@1.0.0","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-mhIpN4+dAN5yxfnnBT8/TzF3hTDwVZn3xbE65LnBbXGsbpR1jJjb+XY86nFUuTjHUA1BnmoOmKUmysuB88DUgQ==","shasum":"d90f99649f9484c63e5105a8403f94d52245bc15","tarball":"https://registry.npmjs.org/@4chain-ag/react-configuration/-/react-configuration-1.0.0.tgz","fileCount":27,"unpackedSize":33761,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEayXpxNvpgoyFuDWJFdjSQIrIAzpW2x8LSGGB3jhGnlAiAqvnFmBaWUQtEXX/OQSJRVVWjtGkHHo/FRUJHW8XO5NQ=="}]},"_npmUser":{"name":"4chain","email":"dev@4chain.studio"},"directories":{},"maintainers":[{"name":"4chain","email":"dev@4chain.studio"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-configuration_1.0.0_1690883493029_0.5621966061721091"},"_hasShrinkwrap":false},"1.0.1":{"name":"@4chain-ag/react-configuration","repository":{"type":"git","url":"git+https://github.com/4chain-AG/react-configuration.git"},"version":"1.0.1","description":"React runtime environment variables (env) configuration","main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/esm/index.d.ts","scripts":{"build":"yarn build:esm && yarn build:cjs","build:esm":"tsc","build:cjs":"tsc --module commonjs --outDir dist/cjs","test":"jest --config jestconfig.json","lint":"eslint \"{**/*,*}.{js,ts,jsx,tsx}\"","prettier":"prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\""},"keywords":["react","env","environment-variables","runtime"],"author":{"name":"kuba-4chain"},"license":"MIT","devDependencies":{"@testing-library/react":"^14.0.0","@types/jest":"^29.5.3","@types/react":"^18.2.16","@types/react-dom":"^18.2.7","@typescript-eslint/eslint-plugin":"^6.2.0","@typescript-eslint/parser":"^6.2.0","eslint":"^8.45.0","eslint-config-prettier":"^8.9.0","eslint-plugin-prettier":"^5.0.0","eslint-plugin-react":"^7.33.0","jest":"^29.6.2","jest-canvas-mock":"^2.5.2","jest-environment-jsdom":"^29.6.2","prettier":"^3.0.0","react":"^18.2.0","react-dom":"^18.2.0","ts-jest":"^29.1.1","typescript":"^5.1.6"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"gitHead":"5fa3eb584ba3630114227f49cefeb5a5a1629f3f","bugs":{"url":"https://github.com/4chain-AG/react-configuration/issues"},"homepage":"https://github.com/4chain-AG/react-configuration#readme","_id":"@4chain-ag/react-configuration@1.0.1","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-gS7I86fzs3RicbLQH5RXRahPE6FrW4WWn7KwPEnmuuB57qFo5UPm/nuW8jLCon1XlJNKAr/GNDacdyG1AP0t/Q==","shasum":"4f37eb325f7083e7ee9c06d4a6788fcd816cd9b1","tarball":"https://registry.npmjs.org/@4chain-ag/react-configuration/-/react-configuration-1.0.1.tgz","fileCount":27,"unpackedSize":33707,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF3sO7lgLx0BhUCoDzGoaiXsH7LO0Gzz/serr5zusGd5AiAcsWg5P4DSL/ad6IX2hQU9xPruJbNO7/jrDh45FKxlDQ=="}]},"_npmUser":{"name":"4chain","email":"dev@4chain.studio"},"directories":{},"maintainers":[{"name":"4chain","email":"dev@4chain.studio"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-configuration_1.0.1_1690885019957_0.6975478918261864"},"_hasShrinkwrap":false},"1.0.2":{"name":"@4chain-ag/react-configuration","repository":{"type":"git","url":"git+https://github.com/4chain-AG/react-configuration.git"},"version":"1.0.2","description":"React runtime environment variables (env) configuration","main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/types/index.d.ts","exports":{"import":"./dist/esm/index.js","require":"./dist/cjs/index.js","default":"./dist/esm/index.js"},"scripts":{"build":"tsc --project tsconfig.esm.json & tsc --project tsconfig.cjs.json","test":"jest --config jestconfig.json","lint":"eslint \"{**/*,*}.{js,ts,jsx,tsx}\"","prettier":"prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\""},"keywords":["react","env","environment-variables","runtime"],"author":{"name":"kuba-4chain"},"license":"MIT","devDependencies":{"@testing-library/react":"^14.0.0","@types/jest":"^29.5.3","@types/react":"^18.2.16","@types/react-dom":"^18.2.7","@typescript-eslint/eslint-plugin":"^6.2.0","@typescript-eslint/parser":"^6.2.0","eslint":"^8.45.0","eslint-config-prettier":"^8.9.0","eslint-plugin-prettier":"^5.0.0","eslint-plugin-react":"^7.33.0","jest":"^29.6.2","jest-canvas-mock":"^2.5.2","jest-environment-jsdom":"^29.6.2","prettier":"^3.0.0","react":"^18.2.0","react-dom":"^18.2.0","ts-jest":"^29.1.1","typescript":"^5.1.6"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"gitHead":"5986dfee3ee10e18ad3806cf70b47fbd8b9480cb","bugs":{"url":"https://github.com/4chain-AG/react-configuration/issues"},"homepage":"https://github.com/4chain-AG/react-configuration#readme","_id":"@4chain-ag/react-configuration@1.0.2","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-y6dtYIRqY+ebrysZXwx4CJ3YLaUhnKzZoaddqrfNPS+PZW7wsyH+Vx0+VstOV2hPomu7w45FvporCdd1ufANzA==","shasum":"70bb148dba4cee14594bb858d5dacd9fd49713fd","tarball":"https://registry.npmjs.org/@4chain-ag/react-configuration/-/react-configuration-1.0.2.tgz","fileCount":15,"unpackedSize":26945,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTam2dT9imDacFOaDQ/64b14lXP8+XONfC9PPcLnx+pQIgMBxyMv+b6WeAaOWF/649rW/RYI2UyAt35ZKEUwXTiiM="}]},"_npmUser":{"name":"4chain","email":"dev@4chain.studio"},"directories":{},"maintainers":[{"name":"4chain","email":"dev@4chain.studio"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-configuration_1.0.2_1691078220492_0.6192396129699091"},"_hasShrinkwrap":false},"1.0.3":{"name":"@4chain-ag/react-configuration","repository":{"type":"git","url":"git+https://github.com/4chain-AG/react-configuration.git"},"version":"1.0.3","description":"React runtime environment variables (env) configuration","main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/types/index.d.ts","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"},"default":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}}},"scripts":{"build":"tsc --project tsconfig.esm.json & tsc --project tsconfig.cjs.json","test":"jest --config jestconfig.json","lint":"eslint \"{**/*,*}.{js,ts,jsx,tsx}\"","prettier":"prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\""},"keywords":["react","env","environment-variables","runtime"],"author":{"name":"kuba-4chain"},"license":"MIT","devDependencies":{"@testing-library/react":"^14.0.0","@types/jest":"^29.5.3","@types/react":"^18.2.16","@types/react-dom":"^18.2.7","@typescript-eslint/eslint-plugin":"^6.2.0","@typescript-eslint/parser":"^6.2.0","eslint":"^8.45.0","eslint-config-prettier":"^8.9.0","eslint-plugin-prettier":"^5.0.0","eslint-plugin-react":"^7.33.0","jest":"^29.6.2","jest-canvas-mock":"^2.5.2","jest-environment-jsdom":"^29.6.2","prettier":"^3.0.0","react":"^18.2.0","react-dom":"^18.2.0","ts-jest":"^29.1.1","typescript":"^5.1.6"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"gitHead":"612223b4beec71dd6f4c6360d8ff647cdfe31683","bugs":{"url":"https://github.com/4chain-AG/react-configuration/issues"},"homepage":"https://github.com/4chain-AG/react-configuration#readme","_id":"@4chain-ag/react-configuration@1.0.3","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-f7hRmCuFWgogF91aK16HEDBiHuxGSZkI914SN3FbCugJdLSwvPOf/WdtX6iRUg3apunvQZeqQbNwTtMq0WUCbg==","shasum":"ed5389569aaed95625364ae813cc34e293875619","tarball":"https://registry.npmjs.org/@4chain-ag/react-configuration/-/react-configuration-1.0.3.tgz","fileCount":15,"unpackedSize":27187,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnvLp8GWoK9X9z+ztsSm8iY9L+Em5G+1ddhDEfP1x34AIhAKpRoWmdfAx35WLVik7cSs1jW4y1sHcTTCUh33ySsbBY"}]},"_npmUser":{"name":"4chain","email":"dev@4chain.studio"},"directories":{},"maintainers":[{"name":"4chain","email":"dev@4chain.studio"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-configuration_1.0.3_1692795857059_0.1808185474348687"},"_hasShrinkwrap":false},"1.0.4":{"name":"@4chain-ag/react-configuration","repository":{"type":"git","url":"git+https://github.com/4chain-AG/react-configuration.git"},"version":"1.0.4","description":"React runtime environment variables (env) configuration","main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/types/index.d.ts","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"},"default":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}}},"scripts":{"build":"tsc --project tsconfig.esm.json & tsc --project tsconfig.cjs.json","test":"jest --config jestconfig.json","lint":"eslint \"{**/*,*}.{js,ts,jsx,tsx}\"","prettier":"prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\""},"keywords":["react","env","environment-variables","runtime"],"author":{"name":"kuba-4chain"},"license":"MIT","devDependencies":{"@testing-library/react":"^14.0.0","@types/jest":"^29.5.3","@types/react":"^18.2.16","@types/react-dom":"^18.2.7","@typescript-eslint/eslint-plugin":"^6.2.0","@typescript-eslint/parser":"^6.2.0","eslint":"^8.45.0","eslint-config-prettier":"^8.9.0","eslint-plugin-prettier":"^5.0.0","eslint-plugin-react":"^7.33.0","jest":"^29.6.2","jest-canvas-mock":"^2.5.2","jest-environment-jsdom":"^29.6.2","prettier":"^3.0.0","react":"^18.2.0","react-dom":"^18.2.0","ts-jest":"^29.1.1","typescript":"^5.1.6"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"gitHead":"85e3cc836e42960d411c7cec8ee20b089e230c9e","bugs":{"url":"https://github.com/4chain-AG/react-configuration/issues"},"homepage":"https://github.com/4chain-AG/react-configuration#readme","_id":"@4chain-ag/react-configuration@1.0.4","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-dewTUItm4/xl48a8CQhfYlDa3KDibdorQBQ0WoY84Sw8LjaKC7MTka3iD0K8eOOsqLx2jvVsJ7Ie91krphmunA==","shasum":"4fb9dc952fbd0af88d22731ff3a6adbbab2eec7f","tarball":"https://registry.npmjs.org/@4chain-ag/react-configuration/-/react-configuration-1.0.4.tgz","fileCount":15,"unpackedSize":28085,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6z7Z/3qEqmOfFkJN72V6l/AJE92VuTKDKAqG2s45KQgIgPbgjv2TGcH2TKwqN1nXGnXiouVN42lkddu6KGndR9pE="}]},"_npmUser":{"name":"4chain","email":"dev@4chain.studio"},"directories":{},"maintainers":[{"name":"4chain","email":"dev@4chain.studio"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-configuration_1.0.4_1695208846909_0.34255857641859233"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-01T09:51:32.970Z","1.0.0":"2023-08-01T09:51:33.216Z","modified":"2023-09-20T11:20:47.252Z","1.0.1":"2023-08-01T10:17:00.129Z","1.0.2":"2023-08-03T15:57:00.655Z","1.0.3":"2023-08-23T13:04:17.301Z","1.0.4":"2023-09-20T11:20:47.044Z"},"maintainers":[{"name":"4chain","email":"dev@4chain.studio"}],"description":"React runtime environment variables (env) configuration","homepage":"https://github.com/4chain-AG/react-configuration#readme","keywords":["react","env","environment-variables","runtime"],"repository":{"type":"git","url":"git+https://github.com/4chain-AG/react-configuration.git"},"author":{"name":"kuba-4chain"},"bugs":{"url":"https://github.com/4chain-AG/react-configuration/issues"},"license":"MIT","readme":"# React-configuration\n\nReact-configuration is a solution for ever-existing problem with environment variables being injected into the application at build time. This requires rebuilding the application every time an env changes.\n\nReact-configuration allows for easy setup of runtime variables without any dependencies, server setups or injecting javascript into the window in index.html (which can be very dangerous in terms of security).\n\nInstead, it uses a JSON file with a React ContextProvider to allow for runtime change and overriding of variables.\n\nIt works with typescript out of the box.\n\nIt also provides an easy solution for overriding environment variables in nginx image in docker [see below](#Overriding-in-nginx-image-in-docker).\n\n### Table of contents\n1. [How to use it](#how-to-use-it)\n    - [Installation](#installation)\n    - [Usage](#usage)\n2. [Advanced](#advanced)\n    - [Overriding default config locally](#overriding-default-config-locally)\n        - [In Vite](#in-vite)\n        - [In Create-React-App (CRA)](#in-create-react-app-cra)\n    - [Overriding in nginx image in docker](#overriding-in-nginx-image-in-docker)\n    - [Using loadConfig without the ContextProvider](#using-loadconfig-without-the-contextprovider)\n3. [Troubleshooting](#troubleshooting)\n    - [Null values](#null-values)\n\n---\n\n## How to use it\n\n### Installation\n\n```bash\nnpm install @4chain-ag/react-configuration\n```\n\n### Usage\n\n1. Create a **`config.default.json`** file in the **`public/`** directory. For example:\n\n```json\n{\n  \"apiUrl\": \"localhost:8000\",\n  \"otherEnvVariable\": \"value\"\n}\n```\n\n2. In your **`index.js`** file import and add **`ConfigProvider`**:\n\n```js\nimport { ConfigProvider } from \"@4chain-ag/react-configuration\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\nroot.render(\n  <React.StrictMode>\n    <ConfigProvider> {/* It will allow to use useConfig hook inside every child component of <App /> */}\n      <App />\n    </ConfigProvider>\n  </React.StrictMode>\n);\n```\n\nIt doesn't have to be an index.js file, you can choose any other file, but config variables will only be available in child components. [Read more about React Context](https://react.dev/learn/passing-data-deeply-with-context)\n\n3. Use **`useConfig`** hook anywhere you need env variables:\n\n```js\nimport { useConfig } from \"@4chain-ag/react-configuration\"\n\nexport const ShowConfigComponent = () => {\n  const { config } = useConfig()\n\n  return (\n    <h3>The api url is: {config.apiUrl}</h3>\n  )\n}\n```\n\n---\n\n## Advanced\n\n### Overriding default config locally\n\n#### In Vite\n\nIn order to override the config variables in vite, create an **`env-config.json`** file in the root directory of your project:\n\n```json\n{\n  \"apiUrl\": \"localhost:3000/override/value\"\n}\n```\n\nYou can override just one, many or all the variables.\n\n#### In Create-React-App (CRA)\n\nIn order to override the config variables in CRA, you need to:\n\n1. Create a **`setupProxy.js`** file in the root of your project and write the following:\n\n```js\nconst config = require(\"@4chain-ag/react-configuration\");\nconst express = require(\"express\");\n\nmodule.exports = config.expressProxy(express);\n```\n\n2. Create an **`env-config.json`** file in the root directory of your project:\n\n```json\n{\n  \"apiUrl\": \"localhost:3000/override/value\"\n}\n```\n\nJust as in Vite, you can override just one, many or all the variables.\n\n---\n\n### Overriding in nginx image in docker\n\nIn order to override the config variables in nginx image in docker you need to:\n\n1. Create an **`env-config.json`** file the directory of your choice (doesn't need to be project root)\n\n```json\n{\n  \"apiUrl\": \"localhost:3000/override/value/docker\"\n}\n```\n\n2. Add a volume with this file to your docker configuration. Example in docker-compose.yml:\n\n```yaml\nservices:\n  app:\n    build:\n      context: .\n      dockerfile: Dockerfile\n    ports:\n      - '3000:3000'\n    volumes:\n      - '/path/to/env-config.json:/usr/share/nginx/html/env-config.json'\n```\n\nIf the file is in the root folder of the project, it is enough to put just a file:\n\n```yaml\nvolumes:\n  - 'env-config/json:/usr/share/nginx/html/env-config.json'\n```\n\nIf the file is somewhere else, you need to specify path to file:\n\n```yaml\nvolumes:\n  - '/path/to/env-config/json:/usr/share/nginx/html/env-config.json'\n```\n\n---\n\n### Using loadConfig without the ContextProvider\n\nIf you don't want to use the useConfig hook inside the ContextProvider, you can just use the async function for loading config from file.\n\n```js\nimport { loadConfigFromFile } from \"@4chain-ag/react-configuration\";\n\nconst config = await loadConfigFromFile()\n```\n\nThis function will return the default config from **`config.default.json`** inside the **`public/`** directory or a merged config, if a file **`env-config.json`** is specified in the root directory of the project.\n\n---\n\n## Troubleshooting\n\n### Null values\n\nNull values in javascript/typescript are treated as non-existent, so they are not supported as values that can be overriden. Therefore, avoid null values and try to set default or empty values instead.\n\n```json\n{\n  \"apiUrl\": null    // WRONG ❌\n  \"apiUrl\": \"\"      // CORRECT ✅\n}\n```\n","readmeFilename":"README.md"}