Is it possible to create 'Preview Layouts' when setting the components extension to '.jsx'?

[stuart-williams]

The docs for creating preview layouts state that layouts are components and should live in the components directory. If I set components to use a JavaScript extension I cannot create HTML/Handlebars preview layouts

[stuart-williams]

One possible solution is...

import { readFileSync } from 'fs'
import { join } from 'path'
import React, { Component } from 'react'

const styles = readFileSync(join(process.cwd(), 'public/main.css'), 'utf8')

class MyDocument extends Component {
  render () {
    return (
      <div>
        <div dangerouslySetInnerHTML={{ __html: this.props.yield }} />
        <style>{styles}</style>
      </div>
    )
  }
}

module.exports = MyDocument

[frikkf]

Another possible solution is this:

import React, { Component } from 'react'

class Preview extends Component {
  render () {
    return (
      <div>
        <link rel="stylesheet" type="text/css" href="<link to your css file>" />
        <div dangerouslySetInnerHTML={{ __html: this.props.yield }} />
      </div>
    )
  }
}

module.exports = Preview