How to type CSS Float using typescript?

Question

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.

Yes, that is the only way. But it looks like you're using React, in which case you may find CSSProperties["float"] to be better. tsplay.dev/mxyvZW — k.tten
– k.tten, Commented Sep 13, 2023 at 21:02
Yeah, it worked! please answer that so that I can mark it as an answer! — Erick Willian
– Erick Willian, Commented Sep 14, 2023 at 12:28

k.tten · Accepted Answer · 2023-09-14 13:55:00Z

1

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

answered Sep 14, 2023 at 13:55

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

VOLK · Accepted Answer · 2023-09-14 01:53:55Z

0

type Props = {
 float?: string
}

answered Sep 14, 2023 at 1:53

VOLK

294 bronze badges

1 Comment

Mark Rotteveel Over a year ago

Although this code might answer the question, I recommend that you also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

Collectives™ on Stack Overflow

How to type CSS Float using typescript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related