How to type CSS Float using typescript?

108 Views Asked by At

I'm passing CSS Float as props for a specific purpose, and to do that I need to type it like this:

type Props = {
 float: ????
}
const Component = ({
  float
}: Props) => {......}

What is the best way to do this?

I know that I can copy and paste to create my own custom type with something like left | right | none | inline-start | inline-end, but for real that is the only way? There should be another way less fragile.

2

There are 2 best solutions below

0
mochaccino On BEST ANSWER

React comes with its own type CSSProperties that you can reference:

import { CSSProperties } from "react";

type Props = {
    float: Exclude<CSSProperties["float"], undefined>; // or Required<CSSProperties>["float"]
};

Playground

1
VOLK On
type Props = {
 float?: string
}