[Typescript Functional Component Template with emotion and tailwind] This is just my template for a new functional component written in React and Typescript using emotion and tailwind. #react #typescript #functional-component #emotion #tailwind

Subscribe.tsx

/** @jsx jsx */
import { css, jsx } from "@emotion/core"
import styled from "@emotion/styled"
import React, { useState, useEffect, FunctionComponent } from "react"
import PropTypes from "prop-types"
import tw from "tailwind.macro"

type SubscribeProps = {
  title: string
  paragraph?: string
}

const ErrorMsgComponent = styled.div`
  ${tw`inline float-right text-red-500 text-xs italic`};
`

const Subscribe: FunctionComponent<SubscribeProps> = ({
  title,
  paragraph = "default",
  children,
}) => {
  // Component state
  const [status, setStatus] = useState("initalValue")

  // Sideeffects like onLoad and stuff
  useEffect(() => {
    document.title = `Hello ${name}`
  }, [name])

  return (
    <div
      css={css`
        ${tw`mx-auto`}
      `}
    >
      hi
    </div>
  )
}

Subscribe.propTypes = {
  title: PropTypes.string.isRequired,
  paragraph: PropTypes.string,
}

export default Subscribe