Center
Centers content vertically and horizontally
Polymorphic
Source
Docs
Package
Usage
Inline
To use Center
with inline elements set inline
prop.
For example, you can center link icon and label:
Polymorphic component
Center
is a polymorphic component – its default root element is div
, but it can be changed to any other element or component with component
prop:
Polymorphic components with TypeScript
Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,
CenterProps
does not extendReact.ComponentPropsWithoutRef'<'div'>'
althoughdiv
is the default element.If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support
component
prop), then your component props interface should extend HTML element props, for example:If you want your component to remain polymorphic after wrapping, use
createPolymorphicComponent
function described in this guide.