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.

github kettanaito / atomic-layout / packages / atomic-layout / examples / hooks / UseResponsiveComponent.jsx View on Github external
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.

MIT
Latest version published 4 years ago

Package Health Score

53 / 100
Full package analysis