React Common config file for all components

Question

I have a config file which stores common settings related to app like app_name, version, records_per_page etc.

I want to use this setting in all components. One way is that I export it in components but if there are 20 components then I will have to import that in all components.

Is there any way to avoid this, so I just include config file once somewhere and I can access it in any component.

probably `react context API` is what you need https://reactjs.org/docs/context.html. This allows components to see variables without having to import them every time. — Rajab Shakirov, Jan 31 '19 at 20:00
I would suggest importing them anyways. If it is a JSON file you can even destructure it in your import {APP_VERSION} from "YourFile.json". — Chase, Jan 31 '19 at 20:13
@RajabShakirov : Thanks for the reply, I just read the docs and i think we can use context in render method only ? I want that config accessible in other methods too. — www.amitpatil.me, Jan 31 '19 at 20:21
Please look at the `the second way` from my answer - it is wider and is applicable not only in the react components, but in any js file and in any place of it. — Rajab Shakirov, Jan 31 '19 at 20:25
I have created app with react-create-app, I dont see webpack.config.js file anywhere, Do i have to eject to edit that file ? — www.amitpatil.me, Jan 31 '19 at 20:26
answering your first question - access to the context is possible not only in the render method https://stackoverflow.com/questions/49809884/access-react-context-outside-of-render-function — Rajab Shakirov, Jan 31 '19 at 20:28
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables Unfortunately, `create-react-app` hides the `webpack` under the hood - so there is a slightly more complicated way of adding env variables - but this is still possible. — Rajab Shakirov, Jan 31 '19 at 20:31
Docs says "You can reference this in any of the lifecycle methods including the render function." I want to access it in my custom functions as well. I have just started learning react, How do you guys use config file ? If you also use traditional method of importing it in all components then i think i should also do the same for now. As my app just have 10-12 components only. — www.amitpatil.me, Jan 31 '19 at 20:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187681/discussion-between-rajab-shakirov-and-www-amitpatil-me). — Rajab Shakirov, Jan 31 '19 at 20:40

score 0 · Accepted Answer · answered Jan 31 '19 at 20:13

one way:

is react context api reactjs.org/docs/context.html, This allows components to "see" variables without having to import them every time.

the second way:

is using env variables in the webpack via DefinePlugin:

webpack.cofig.js

const PACKAGE = require('package.json');

new webpack.DefinePlugin({
    VERSION: JSON.stringify(PACKAGE.version),
    IS_DEBUG_ENV: process.env.NODE_ENV === 'debug',
    SOME_VAR: true,
  }),

usage in some component:

import * as React from "react";

export class View extends React.Component {
  render() {

    return (
      <div>
        {SOME_VAR ? "hoooray" : ":("}
      </div>
    );
  }
}

Please note that there is no import of SOME_VAR

React Common config file for all components

1 Answers1