best practice for using a ThemeProvider

[souporserious]

Hello, we are using a React component kit at my work that requires each top-level React tree to be wrapped in a ThemeProvider component in order to apply proper theming to each component. Our app, in particular, isn't a SPA which the Provider pattern seems to be more catered to so I was curious if there are any blessed patterns in Rails on how to go about this? Should we roll our own react_component helper that wraps the component or is there some type of hook we could possibly use? Any guidance you can provide is greatly appreciated 🙏.

[BookOfGreg]

The react-component helper should always be the root of the tree. There have been some discussions in the past about passing react-components as children to other react-components but I feel those are infeasable.
Therefore in at least V2.x of this gem you should be completely safe (and sensible) to extend the react-component method to add in that themeprovider at that point.

Hope than answers your question 😄

[souporserious]

Awesome, thank you for the quick reply! 🙏 This definitely answers my question 🤗.

[souporserious]

Hello again 😊, I'm curious if you have any recommendations for what an implementation would look like for this?

Right now we have a react_mounter.rb file which overwrites the react_component call:

class ReactMounter < React::Rails::ComponentMount
    def react_component(name, props = {}, options = {}, &block)
      props[:component] = name
      html_tag = super
      html_tag.sub!(name, 'AppProvider')
      html_tag.html_safe
    end
  end

and then in packs/application.js at the bottom we create the AppProvider component:

import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider } from 'emotion-theming'
const theme = {}

window.AppProvider = ({ component, ...props }) => {
  const Component = eval(`window.${component}`)
  return (
    <ThemeProvider theme={theme}>
      <Component {...props} />
    </ThemeProvider>
  )
}

This approach is working, but it has some caveats since it isn't friendly to SSR or directly rendering a component from a file without putting it on window. Is there a better approach we can take here? I'd also be happy to submit a PR and add some docs around this if you think it would be useful.

[souporserious]

For anyone that may stumble upon this. We ended up with the react_mounter file above with the ThemeProvider component below that gets loaded direct from webpack which seems to be working great:

import React from 'react'
import ReactRailsUJS from 'react_ujs'
import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'

const theme = {}

function ThemeProvider({ component, ...props }) {
  const Component = ReactRailsUJS.getConstructor(component)
  return (
    <EmotionThemeProvider theme={theme}>
      <Component {...props} />
    </EmotionThemeProvider>
  )
}

export default ThemeProvider

[benjaminsehl]

@souporserious — bit of a noob here in terms of setting up react-rails, more used to full on React front ends. Do you happen to have a example repo I could check out to see how everything is set up?

[souporserious]

@benjaminsehl yup! :) Just set up a small use case here, hope that helps! There is an open PR that will make this easier in the future if it gets merged.