How to use atomic-layout - 7 common examples

import React from 'react'
import Layout, { Composition } from 'atomic-layout'

Layout.configure({})

const templateBox = `
thumbnail
heading
channelName
meta
`

const templateRow = `
thumbnail heading heading
thumbnail channelName meta
thumbnail description description
`

const Video = ({ isBox, title, channelName, views, description }) => (

componentWillMount() {
    Layout.configure({
      defaultUnit: 'rem',
    })
  }

componentWillMount() {
    Layout.configure({
      defaultUnit: 'rem',
      defaultBreakpointName: 'mobile',
      breakpoints: {
        mobile: {
          maxWidth: '575px',
        },
        tablet: {
          minWidth: '576px',
          maxWidth: '768px',
        },
        desktop: {
          minWidth: '769px',
        },
      },
    })
  }

useViewportChange(() => {
    setVisibility(
      matchMedia(`(min-width: ${Layout.breakpoints.lg.minWidth})`).matches,
    )
  })

import React from 'react'
import styled from 'styled-components'
import { useResponsiveComponent } from 'atomic-layout'

const Text = useResponsiveComponent(
  styled.h1`
    color: ${({ color }) => color};
    font-size: ${({ size }) => size}px;
  `,
)

const Scenario = () => {
  const textRef = React.useRef({})
  const [refDerivedData, setRefDerivedData] = React.useState(null)

  React.useEffect(() => {
    setRefDerivedData(textRef.current.id)
  }, [textRef.current])

  return (
    <div></div>

const Element = (props) => {
  const { size, showBadge, fontSize } = useResponsiveProps(props)

  return (
    <div style="{{" id="element">
      
        {showBadge &amp;&amp; }
      
    </div>
  )
}

const UseResponsiveValue = () => {
  const text = useResponsiveValue(
    {
      xs: 'xs',
      md: 'md',
      lg: 'lg',
    },
    'default',
  )

  return {text}
}