Layouts

Layouts are React components that allow you to template the HTML around your page content (a concept borrowed from Rails).

This could include things like:

  • Tags for your <head>
  • Shared header, footer or sidebar

You don't need to directly template your layout's <head> tags in place. Instead, use react-head anywhere in the component hierarchy and Tropical will put everything in the right place in the final rendered HTML document.

Default and alternative layouts

Pages use src/layouts/DefaultLayout.jsx by default. You can safely edit the DefaultLayout provided by Tropical.

To specify a different layout for a page, provide a component to the page's meta.Layout:

import DifferentLayout from '../layouts/different_layout'

export const meta = {
  title: 'Page with different layout',
  Layout: DifferentLayout
}

Layout props

Layout components are rendered with 3 props:

  • pages (object) — an object containing all of the site's pages, keyed by pathname
  • meta (object) — the current page's meta object
  • children (React Element) — the current page content

Next: Images