Atomic Layout
  • Introduction
  • Motivation
  • Resources
  • FAQ
    • Comparison with styled-system
  • Getting started
    • Installation
    • First composition
    • Responsive composition
    • Nested composition
  • Fundamentals
    • Breakpoints
    • Prop aliases
    • Responsive props
  • API
    • Layout
      • configure()
    • Components
      • Box
      • Composition
      • Only
      • Visible
    • Hooks
      • useMediaQuery
      • useResponsiveQuery
      • useViewportChange
      • useBreakpointChange
      • useResponsiveValue
      • useResponsiveProps
    • Utilities
      • query
      • makeResponsive
  • Recipes
    • Semantics
    • Namespaces
    • Iterative areas
    • Responsive layout
    • Explicit media query
Powered by GitBook
On this page
  • Using HTML element
  • Using React component
  • Custom areas components
  1. Recipes

Semantics

PreviousmakeResponsiveNextNamespaces

Last updated 5 years ago

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 styled-components feature.

See 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:

import React from 'react'
import { Box } from 'atomic-layout'

export const Header = (props) => (
  <Box as="header" {...props} />
)

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.

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} />
)

Custom areas components

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>
)
polymorphic prop
Polymorphic prop API