2

I am trying to pass props into all of my nested components and context does not meet my use case.

I am passing a constant value that does not need to trigger a rerender when it changes (as it will never change)

In the code example below I have a PropsProvider which I am using to traverse the children tree and inject the props into. I am unable to go beyond the top level though.

https://stackblitz.com/edit/react-o4x2e7

David Alsh
  • 6,747
  • 6
  • 34
  • 60
  • And a constant value on the global scope doesn't work? – guzmonne Jul 28 '19 at 02:18
  • I'm trying to ensure that my components don't import anything from the global scope so they can maintain a level of agnosticism from the main application / no coupling – David Alsh Jul 28 '19 at 02:40
  • 2
    I see. I still think that you should be able to solve this using React Context. I started playing with your idea and created [this sandbox](https://codesandbox.io/embed/twilight-thunder-67p7c). It uses React Context and a Higher Order Component to inject the `value` of the context into a Component that needs it. In your case, it would be on all components, but this way is not so intrusive. – guzmonne Jul 28 '19 at 02:43
  • https://stackoverflow.com/questions/44189648/how-to-implement-reactjs-global-configuration. Is this what you need ? – thelonglqd Jul 28 '19 at 02:45
  • @guzmonne Thanks for the example! The challenge here is that I couldn't pull `Child.jsx` out into its own package (conceptually imagine it would go in npm). The component is coupled to the context which is declared during application bootstrap. I suppose I could have the component itself only take props and after you install the library you would wrap and re-export every component you use with a `withValue`. That sounds pretty inconvenient to me, though. – David Alsh Jul 28 '19 at 03:34
  • How about to use `.env` file for global constant values? – Diamond Jul 28 '19 at 06:12

0 Answers0