Semantics

Search…
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.
See Polymorphic prop API in styled components' documentation.
Using HTML element
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:
1
import React from 'react'
2
import { Box } from 'atomic-layout'
3
​
4
export const Header = (props) => (
5
  <Box as="header" {...props} />
6
)
Copied!
Using React component
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.
1
import React from 'react'
2
import { Box } from 'atomic-layout'
3
import styled from 'styled-components'
4
​
5
const Header = (props) => (
6
  // Spreading the props assigns "className" (SC)
7
  // and the props from Atomic Layout.
8
  <div {...props} />
9
)
10
​
11
export const MyComponent = () => (
12
  <Box as={Header} height={50} padding={10} />
13
)
Copied!
Custom areas components
Polymorphic prop can be used on the area components generated by Composition.
1
import React from 'react'
2
import { Composition } from 'atomic-layout'
3
import { Footer as CustomFooter } from '@components'
4
​
5
export const PageContent = () => (
6
  <Composition as="main" areas="header footer">
7
    {(Areas) => (
8
      <>
9
        <Areas.Header as="header">{...}</Areas.Header>
10
        <Areas.Footer as={CustomFooter}>{...}</Areas.Footer>
11
      </>
12
    )}
13
  </Composition>
14
)
Copied!
makeResponsive
Next - Recipes
Namespaces
Last modified 1yr ago
Copy link
Contents
Using HTML element
Using React component
Custom areas components