Nested object with dynamic keys in typescript

Question

Tryping to implement type for position object where it stores dynamic keys and returns objects which I will destructure in React Component as props:


interface Position  {
 [key: NotificationPositions]: any
}

const positions:Record<NotificationPositions,any> = {
  'top': {
    top: "0",
    right: "0",
    left: "0",
    alignItems: "center",
  },
  "top-right": {
    top: "0",
    right: "0",
    alignItems: "flex-end",
  },
  "top-left": {
    top: "0",
    left: "0",
    alignItems: "flex-start",
  },
  'bottom': {
    bottom: "0",
    right: "0",
    left: "0",
    alignItems: "center",
  },
  "bottom-left": {
    bottom: "0",
    left: "0",
    alignItems: "flex-start",
  },
  "bottom-right": {
    bottom: "0",
    right: "0",
    alignItems: "flex-end",
  },
};

well I couldn't do it and I couldn't find information on the internet so I am asking here. Maybe answer is available on internet but I don't know how to search it. So any help is appriciated. Thanks.

What's the problem with your approach ?

akuiper
– akuiper

2022-09-11 19:01:02 +00:00
Commented Sep 11, 2022 at 19:01 — akuiper
– akuiper, Commented Sep 11, 2022 at 19:01

dm.shpak · Accepted Answer · 2022-09-11 18:58:20Z

1

Your data looks like react style attribute, so it looks like you need something like this

interface Position  {
 [key: NotificationPositions]: React.CSSProperties
}

answered Sep 11, 2022 at 18:58

dm.shpak

3551 silver badge8 bronze badges

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

1 Comment

OuzKagan Over a year ago

It's Chakra UI attributes

Collectives™ on Stack Overflow

Nested object with dynamic keys in typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related