Snippets

React

Typed components

Try to keep one file with one named export when possible. An exception can be when a default export is required for framework specific reasons.

Without children

type Props = {
  label: string;
};

export const Button = ({ label }: Props) => {
  return <button>{label}</button>;
};

With children

import { PropsWithChildren } from 'react';

type Props = {
  prop: boolean;
};

export const Button = ({ children }: PropsWithChildren<Props>) => {
  return <button>{children}</button>;
};