Const BP object and enum.

[iBreadInside]

Hello! I am a new guy here and I have a question.

When I am using useBreakpoint with simple const Breakpoint = { MOBILE: 320, DESKTOP: 1024, } all working good.

Today I'm migrating from jsx to tsx and rewrite my {key: value} objects to enums:

enum Breakpoint { MOBILE = 320, DESKTOP = 1024, };

But this is not working. Can you explain me why? These are totally different structures?

UPD: What I discover for myself for now: Object.keys(firstCase) returns ['MOBILE', 'DESKTOP']. For Object.values it is [320, 1024]
For enum keys are ['320', '1024', 'MOBILE', 'DESKTOP'] and values are ['MOBILE', 'DESKTOP', 320, 1024].

So for enum { minWidth } is 'MOBILE' and for const is 1024. And I am checking with minWidth === Breakpoint.DESKTOP

[iiroj]

Using the TypeScript Playground, your enum compiles to:

"use strict";
var Breakpoint;
(function (Breakpoint) {
    Breakpoint[Breakpoint["MOBILE"] = 320] = "MOBILE";
    Breakpoint[Breakpoint["DESKTOP"] = 1024] = "DESKTOP";
})(Breakpoint || (Breakpoint = {}));
;

Not sure why it's not working... but maybe it's because it's a variable that gets modified via the IIFE.

[iiroj]

Maybe you should do it like this:

enum Breakpoint {
  MOBILE = 'MOBILE',
  DESKTOP = 'DESKTOP',
}

const BREAKPOINTS: Record<Breakpoint, number> = {
  [Breakpoint.MOBILE]: 320,
  [Breakpoint.DESKTOP]: 1024,
}

...

const { breakpoint } = useBreakpoint(BREAKPOINTS)

if (breakpoint === Breakpoint.DESKTOP) {
  ...
}

[iiroj]

Is this still an issue for you?

[iBreadInside]

Sorry. For now it is not problem to me. Thank you for your answers!