How to declare a global variable in React

Question

I initialized i18n translation object once in a component  a first component that loads in the app    That same object is required In all other components  I don t want to re-initialize it in every component  What s the way around  Making it available to window scope doesn t help as I need to use it in the render   method  Please suggest a generic solution for these problems and not i18n specific solution

User · Answer

GlobalThis may be supported in some browsers  You can refer following links https   webpack js org plugins provide-plugin   https   webpack js org plugins define-plugin

User · Answer

Can keep global variables in webpack i e  in webpack config js  externals       config   JSON stringify GLOBAL VARIABLE   global var value       In js module can read like  var config   require  config   var GLOBAL VARIABLE   config GLOBAL VARIABLE   Hope this will help

User · Answer

The best way I have found so far is to use React Context but to isolate it inside a high order provider component

User · Answer

Maybe it s using a sledge-hammer to crack a nut  but using environment variables  with Dotenv https   www npmjs com package dotenv  you can also provide values throughout your React app  And that without any overhead code where they are used  I came here because I found that some of the variables defined in my env files where static throughout the different envs  so I searched for a way to move them out of the env files  But honestly I don t like any of the alternatives I found here  I don t want to set up and use a context everytime I need those values  I am not experienced when it comes to environments  so please  if there is a downside to this approach  let me know

User · Answer

Create a file named  config js  in   src folder with this content   module exports   global config         i18n            welcome                en   Welcome               fa                                   rest of your translation object              other global config variables you wish      In your main file  index js  put this line   import    config     Everywhere you need your object use this   global config i18n welcome en

User · Answer

Here is a modern approach  using globalThis   we took for our React Native app   globalThis is now included in      Modern browsers - MDN documentation Typescript 3 4 - Handbook documentation ESLint v7 - Release notes    appGlobals ts     define our parent property accessible via globalThis  Also apply the TypeScript type  var app  globalAppVariables      define the child properties and their types   type globalAppVariables       messageLimit  number       more can go here          set the values  globalThis app       messageLimit  10       more can go here          Freeze so these can only be defined in this file  Object freeze globalThis app      App tsx  our main entry point file   import    appGlobals      other code    anyWhereElseInTheApp tsx  const chatGroupQuery   useQuery GET CHAT GROUP WITH MESSAGES BY ID      variables        chatGroupId      currentUserId  me id      messageLimit  globalThis app messageLimit      used here

User · Answer

Is not recommended but     you can use componentWillMount from your app class to add your global variables trough it    a bit like so   componentWillMount  function          window MyVars             ajax  require     helpers ajax jsx            utils  require     helpers utils jsx              still consider this a hack    but it will get your job done  btw componentWillMount executes once before rendering  see more here  https   reactjs org docs react-component html mounting-componentwillmount

User · Answer

Why don t you try using Context   You can declare a global context variable in any of the parent components and this variable will be accessible across the component tree by this context varname  You only have to specify childContextTypes and getChildContext in the parent component and thereafter you can use modify this from any component by just specifying contextTypes in the child component   However  please take a note of this as mentioned in docs      Just as global variables are best avoided when writing clear code  you should avoid using context in most cases  In particular  think twice before using it to  save typing  and using it instead of passing explicit props

User · Answer

You can use mixins in react https   facebook github io react docs reusable-components html mixins

User · Answer

I don t know what they re trying to say with this  React Context  stuff - they re talking Greek  to me  but here s how I did it   Carrying values between functions  on the same page  In your constructor  bind your setter   this setSomeVariable   this setSomeVariable bind this     Then declare a function just below your constructor   setSomeVariable propertyTextToAdd        this setState           myProperty  propertyTextToAdd             When you want to set it  call this setSomeVariable  some value      You might even be able to get away with this state myProperty    some value     When you want to get it  call var myProp   this state myProperty   Using alert myProp   should give you some value    Extra scaffolding method to carry values across pages components  You can assign a model to this  technically this stores   so you can then reference it with this state   import Reflux from  reflux  import Actions from    actions actions   class YourForm extends Reflux Store       constructor                 super            this state                 someGlobalVariable                         this listenables   Actions          this baseState                 someGlobalVariable                            onUpdateFields name  value            this setState                name   value                         onResetFields             this setState              someGlobalVariable                          const reqformdata   new YourForm  export default reqformdata   Save this to a folder called stores as yourForm jsx   Then you can do this in another page   import React from  react  import Reflux from  reflux  import  Form  from  reactstrap  import YourForm from    stores yourForm jsx   Reflux defineReact React   class SomePage extends Reflux Component       constructor props            super props           this state                 someLocalVariable                        this stores                 YourForm                      render              const myVar   this state someGlobalVariable          return                lt Form gt                   lt div gt  myVar  lt  div gt               lt  Form gt                    export default SomePage   If you had set this state someGlobalVariable in another component using a function like   setSomeVariable propertyTextToAdd        this setState          myGlobalVariable  propertyTextToAdd            that you bind in the constructor with   this setSomeVariable   this setSomeVariable bind this     the value in propertyTextToAdd would be displayed in SomePage using the code shown above

User · Answer

Beyond React You might not be aware that an import is global already  If you export an object  singleton  it is then globally accessible as an import statement and it can also be modified globally  If you want to initialize something globally but ensure its only modified once  you can use this singleton approach that initially has modifiable properties but then you can use Object freeze after its first use to ensure its immutable in your init scenario  const myInitObject      export default myInitObject  then in your init method referencing it  import myInitObject from    myInitObject  myInitObject someProp    i am about to get cold  Object freeze myInitObject   The myInitObject will still be global as it can be referenced anywhere as an import but will remain frozen and throw if anyone attempts to modify it  My example hack of using global state using a singleton https   codesandbox io s react-typescript-playground-forked-h8rpu If using react-create-app  what I was looking for actually  In this scenario you can also initialize global objects cleanly when referencing environment variables  Creating a  env file at the root of your project with prefixed REACT APP  variables inside does quite nicely  You can reference within your JS and JSX process env REACT APP SOME VAR as you need AND it s immutable by design  This avoids having to set window myVar    REACT APP MY VAR  in HTML  See more useful details about this from Facebook directly  https   facebook github io create-react-app docs adding-custom-environment-variables

[reactjs] How to declare a global variable in React?

Examples related to reactjs

Examples related to javascript-globalize