Skip to main content
⌘K
Last modified: 24/Jun/2024

Types

This page is here to help us unify / strengthen how we use types. Please read it through, and if you have any issues or concerns, reach out to the team on slack and let's talk about it.

#Make your types as specific as possible

Try to avoid using ReactNode, because it contains booleans, null, undefined etc. Use ReactElement instead and list the specific types you also need such as string, number or null. However, if we have a children prop, we will usually just give it a ReactNode type.

#Naming conventions

We have the following naming conventions to be able to easily determine what our types refer to. Please use these where you can.

#...Props suffix:

Props that are implemented and processed by Stratus.

Example:

export interface BottomSheetProps {
  children: ReactNode
  isVisible: boolean
  handleClose?: () => void
}

#...Interface suffix:

The

...Props
type extended by default HTMLElement types.

Example:

interface RadioCardInterface
  extends RadioCardProps,
    Omit<Omit<InputHTMLAttributes<HTMLDivElement>, 'value'>, 'onChange'> {}

#...Component suffix:

The ...Interface extended by JSX.Element type

If you have a forwardRef component, you can do something like this:

ForwardRefExoticComponent<...Props/...Interface & RefAttributes<HTML...Element>>

If you have subcomponents, you have to use ComponentType:

ComponentType<...Props/...Interface>

If none of the above is true, you can use this. This is more specific than the ComponentType, since that includes class components as well, which we don't need. Don't use FC because its usage is discouraged by the React community.

(props: ...Props/...Interface) => JSX.Element

#Misc types

Other types can be pretty much named to your liking, but if those don’t fit the conventions we have, use a different suffix for it, such as ...Type, or something like IconName is great as well.

#Documentation

Always document your exported types in the component's documentation page. Provide a description for what the type represents. If you're not sure how, you can always take a look at the ones already documented.

#Exports

Always export types that may be useful to the users.