How to use the atomic-layout.useResponsiveComponent function in atomic-layout
To help you get started, we’ve selected a few atomic-layout examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
kettanaito / atomic-layout / packages / atomic-layout / examples / hooks / UseResponsiveComponent.jsx View on Github 
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>atomic-layout
Physical representation of layout composition to create declarative, responsive layouts in React.
