Semantics
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.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>
)
Last modified 3yr ago