Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Define Components at beginning and end of body #185

Closed
wants to merge 1 commit into from
Closed

feat: Define Components at beginning and end of body #185

wants to merge 1 commit into from

Conversation

alexbchr
Copy link
Contributor

Adds 2 options to playroom.config.js, which are bodyStart and bodyEnd. They work similarly to frameComponent, which means that they receive a file path to a component which will be rendered at the beginning/end of body (well in fact in the root div).

Example usage:

// playroom.config.js
{
  // ...
  bodyEnd: './bodyEnd.js'
  // ...
}

// bodyEnd.js
import React from 'react'

export default () => (
  <script type="text/javascript">
    {/* Put Analytics script here */}
  </script>
)

This was necessary for my team as we wanted to plug an Analytics library on our playroom, which of course requires us to add a script in the <body />. It could also be used to provide a watermark, link or anything absolutely positioned on the page, maybe for branding purposes. Furthermore, I think this could also fix issue #40, as using the new bodyStart option and a library such as React Helmet, this use case could be covered.

I am also aware that some things are missing from this PR such as examples and documentation, which I will include once I know this is relevant to this repo.

Also, I am considering adding a similar feature to the preview page, so we can have analytics there too. Prop names could be something like previewBodyStart and previewBodyEnd.

@alexbchr alexbchr requested a review from a team as a code owner September 11, 2020 20:48
@michaeltaranto
Copy link
Contributor

Hey 👋

Just having a look at your approach, is there a need to render this from inside the Playroom app? Or could this be achieved by opening up config to provide your own html template for the built app?

@maraisr
Copy link
Contributor

maraisr commented Sep 14, 2020

I'd second that @michaeltaranto, my subjective opinion is that "before/after(render)" hooks seem bug prone, and probably won't suite all use-cases.

Much easier if it was just a blanket override of the template; such that yeah as you've said @michaeltaranto, simply overriding the template.html. And just articulate in the docs or something which element the app mounts into.

@alexbchr
Copy link
Contributor Author

That's a great idea, I will try to look at this when I have some time this week.

Should I close this PR and open a new one once the code is ready?

@alexbchr
Copy link
Contributor Author

Closing in favor of #189

@alexbchr alexbchr closed this Sep 14, 2020
@alexbchr alexbchr deleted the feature/body-start-and-end branch September 14, 2020 14:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@alexbchr @michaeltaranto @maraisr