3.0 KiB
Custom App Component
Use a custom App component to completely customize the layout, add context providers, use global state, or set a custom scope.
Layouts
Create a file named _app.js
to provider a custom App component to x0.
This file can be used for custom layouts, including headers, footers, and navigation.
// _app.js
import React from 'react'
import { Link } from 'react-router-dom'
import {
Container,
Toolbar,
NavLink
} from 'rebass'
export default class extends React.Component {
render () {
const { children } = this.props
return (
<React.Fragment>
<Toolbar>
<NavLink is={Link} to='/'>
Home
</NavLink>
</Toolbar>
<Container>
{children}
</Container>
</React.Fragment>
)
}
}
Providers
Context providers, such as styled-component's ThemeProvider
can be included in a custom app.
import React from 'react'
import { ThemeProvider } from 'styled-components'
import theme from '../src/theme'
export default props =>
<ThemeProvider theme={theme}>
<React.Fragment>
{props.children}
</React.Fragment>
</ThemeProvider>
Scope
Use the x0 ScopeProvider
to customize the components used when rendering markdown elements in .md
or .mdx
files.
The ScopeProvider
also provides scope to live code examples in code fences.
import React from 'react'
import { ScopeProvider } from '@compositor/x0/components'
import * as scope from '../src'
export default props =>
<ScopeProvider scope={scope}>
{props.children}
</ScopeProvider>
App State
Global application state can also be provided in a custom App.
Use props.Component
instead of props.children
to pass props to the rendered route.
import React from 'react'
export default class extends React.Component {
state = {
count: 0
}
update = fn => this.setState(fn)
render () {
const { Component } = this.props
return (
<Component
{...this.state}
update={this.update}
/>
)
}
}
Props
Custom Apps receive the following props, which can expose greater control over the rendering.
children
: rendered content of the pageComponent
: a component to pass props to the current route and render contentroutes
: an array of route objects for the entire site – can be used for rendering navigationroute
: the current route object- The React Router state is also passed to the App
Route Object
Routes include the following properties:
key
: the filepath from webpack'srequire.context
name
: the basename of the filepath
: path used for routingextname
: file extensiondirname
: file directoryexact
: (boolean) added to index pages for React Routermodule
: the JS module for the fileComponent
: the default export from the fileprops
: default props or front-matter specified in the file