Wrapping the React application

📘

This is an article for advanced users of Frontastic.

Sometimes you need to wrap your React application into another component. A popular example would be using a theme with the CSS in JS library styled components. While Frontastic doesn't officially support styled components, it should work within Frontastic without too much work.

If you want to leverage styled components to use a global theme for your application, you need to wrap it around your whole application.

For that, we provide a <AppContainer /> helper component that's wrapped around all nodes. Using our ComponentInjector, you can overwrite this <AppContainer /> with your custom implementation.

The following shows an example custom <AppContainer />:

import React from 'react'
import PropTypes from 'prop-types'
import Light from '@acme/acme-design-system/themes/Light';
import { ThemeProvider } from 'styled-components';

const AcmeAppContainer = ({children}) => {
    return (
        <ThemeProvider theme={Light}>
            {children}
        </ThemeProvider>
    )
}

AcmeAppContainer.propTypes = {
    children: PropTypes.node
}

export default AcmeAppContainer

This then needs to be registered using the ComponentInjector in project/src/js/injection.js:

import AcmeAppContainer from './app/acmeAppContainer' 
/// [...] ComponentInjector.set('AppContainer', AcmeAppContainer);

See the injecting custom components and reducers article for more info on the ComponentInjector


Did this page help you?