Wrapping the React Application

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 /> 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 this article for more info on the ComponentInjector


‹ Back to Article List

Next Article ›

Custom Sitemap

Still need help? Contact Us Contact Us