ts・react関連のメモ

import * as React from 'react'
import { useMediaQuery } from 'react-responsive'

export const isPc = () => useMediaQuery({ query: '(min-width: 901px)' })
export const isSp = () => useMediaQuery({ query: '(max-width: 900px)' })

interface Props {
  pc?: React.ReactNode
  sp?: React.ReactNode
}

export const Responsive: React.VFC<Props> = ({ pc, sp }) => {
  const matchPc = isPc()
  const matchSp = isSp()
  return (
    <>
      {matchPc && <>{pc}</>}
      {matchSp && <>{sp}</>}
    </>
  )
}

export const sp = 900
export const spStyle = `@media (max-width: ${sp}px)`

const Content = styled('div')`
  width: 860px;

  ${spStyle} {
    width: 100%;
  }
`

  const submit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
  }