By default, components generated by the library (Box
, Composition
, and area components) render a <div>
element, which may not be a valid HTML element in some use cases.
You can provide a custom HTML element or a React component to render instead of the default one by using polymorphic prop styled-components
feature.
See Polymorphic prop API in styled components' documentation.
To render a different HTML element provide its name as a value of the as
prop of any component exported or generated by the library:
import React from 'react'import { Box } from 'atomic-layout'​export const Header = (props) => (<Box as="header" {...props} />)
To render a custom React component provide its reference as a value to the as
prop.
You must spread the props in your custom component to propagate class names generated by styled-components
.
import React from 'react'import { Box } from 'atomic-layout'import styled from 'styled-components'​const Header = (props) => (// Spreading the props assigns "className" (SC)// and the props from Atomic Layout.<div {...props} />)​export const MyComponent = () => (<Box as={Header} height={50} padding={10} />)
Polymorphic prop can be used on the area components generated by Composition
.
import React from 'react'import { Composition } from 'atomic-layout'import { Footer as CustomFooter } from '@components'​export const PageContent = () => (<Composition as="main" areas="header footer">{(Areas) => (<><Areas.Header as="header">{...}</Areas.Header><Areas.Footer as={CustomFooter}>{...}</Areas.Footer></>)}</Composition>)