Wrapping the React Application

Stability

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 does not officially support styled components, it should work within frontastic without a lot of 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 /> component that is wrapped arounda 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);