CODEWITHSUNDEEP
typescript
JillAndMe
JillAndMe

Reputation: 4551

How to make object to interface in this case

I want to make this object as a interface.

{
    size1: 'flexDirection value, for example: column, column-reverse, row or row-reverse',
    size2: 'column, column-reverse, row or row-reverse',
    ...
    sizeN: 'column, column-reverse, row or row-reverse'
}

I tried 

interface Test {
  foo: number;
  bar: string;
}

But, as you can see the object is repeats size of n.

Use case:

<Column breakpoints={{
    850: { flexDirection: 'row', backgroundColor: 'green' },
    600: 'row-reverse'
}}>
    <b>Hello</b>
    <span>world!</span>
</Column>

How to make this object to interface in this case?

Upvotes: 0

Views: 26

Answers (1)

Denis Frezzato
Denis Frezzato

Reputation: 968

type Breakpoint = 320 | 480 | 768 | 992 | 1200
type ResponsiveStyle = Partial<Record<Breakpoint, CSSProperties>>

const breakpoints: ResponsiveStyle = {
    768: { flexDirection: 'row', backgroundColor: 'green' },
}

Upvotes: 1

Related Questions