React and Typescript
I do not use the built in functional component type React.FC
because it forces you to always have the prop children
.
Instead I like to be explicit about what props go into each component, that way VS Code
will give me a hard time if I try to add a child to a component that does not support it.
Transform or Format Components
When you only want to style some input or transform it.
import formatISO from 'date-fns/formatISO'
export interface DateProps {
date: string
}
export function Date({ date }: DateProps) {
if (!date) {
return null
}
const formatted = formatISO(date, { representation: 'date' })
return <time dateTime={formatted}>{formatted}</time>
}
Wrappers
When you want to create a wrapper element that always will have children
import clsx from 'clsx'
import { ReactNode } from 'react'
export interface GridProps {
children: ReactNode // VS Code will warn you if you use this component without children
className?: string // optional posibility to add additional classes to grid
}
export function Grid({ children, className }: GridProps) {
const mobileLayout = 'grid gap-4 grid-cols-1'
const desktopLayout = 'md:gap-8 md:grid-cols-2'
return <div className={clsx('grid', mobileLayout, desktopLayout, className)}>{children}</div>
}
I'm using Tailwind CSS in the above example