# useOpeningHours (https://docs.salla.dev/twilight/react/hooks/use-opening-hours)



Use `useOpeningHours` when the store takes orders only during set hours and you want to show a "We are closed" notice with the next opening time.

## Example [#example]

```tsx title="app/components/layout/ClosedNotice.tsx"
import { useStore } from '@salla.sa/twilight-theme-engine/hooks/useStore';
import { useOpeningHours } from '@salla.sa/twilight-theme-engine/hooks';

export function ClosedNotice() {
  const { settings } = useStore();
  const { isOpen, nextOpenFormatted } = useOpeningHours(settings.opening_hours);

  if (isOpen) return null;
  return <p>We are closed. We open {nextOpenFormatted}.</p>;
}
```

## API [#api]

```ts
function useOpeningHours(settings?: OpeningHoursSettings): UseOpeningHoursResult;

interface OpeningHoursSettings {
  enabled?: boolean;
  hours?: Record<string, string[]>; // lowercase day name -> time ranges
}
```

| Prop       | Type                              | Description                                                         |
| ---------- | --------------------------------- | ------------------------------------------------------------------- |
| `settings` | `OpeningHoursSettings` (optional) | Pass `store.settings.opening_hours`. See [Store data](https://docs.salla.dev/twilight/react/data/store). |

Returned fields:

| Prop                | Type           | Description                                                                                            |
| ------------------- | -------------- | ------------------------------------------------------------------------------------------------------ |
| `isOpen`            | `boolean`      | `true` when the store is open now, or when opening hours are not in use.                               |
| `isEnabled`         | `boolean`      | `true` when `enabled` is set and `hours` exist.                                                        |
| `nextOpen`          | `Date \| null` | When the store opens next. `null` when it is open or not configured.                                   |
| `nextOpenFormatted` | `string`       | The same moment as translated text, such as `Sunday 9:00 AM`. Empty when it is open or not configured. |

`hours` keys are `monday` to `sunday`. Each value is a list of ranges such as `["09:00-12:00", "13:00-18:00"]` or `["09:00 AM-12:00 PM"]`. A day with no entry is closed.

## Gotchas [#gotchas]

* When opening hours are off or missing, `isOpen` is `true` and `isEnabled` is `false`. Use `isEnabled` to decide whether to show anything about opening hours at all.
* The time is the device's local time, not the store's time zone. The hook does not read a time zone from the store settings. A customer in another time zone sees that zone's clock.
* The server and the browser can disagree on the current time, so a server-rendered "closed" notice can change after hydration. Render the notice only after mount (for example from an effect) if that flicker matters.
* The result is computed when `settings` changes, not on a timer. It does not flip from closed to open while the page stays open.
* A range is skipped when its start is not before its end, so ranges that cross midnight (`22:00-02:00`) are ignored. A time that cannot be read counts as `00:00`.
* If no day in the next 7 days has a range, the hook reports the store as open.
* Import it from `@salla.sa/twilight-theme-engine/hooks`. It has no subpath of its own.

## Next [#next]

* [Store data](https://docs.salla.dev/twilight/react/data/store): `settings.opening_hours` and the other store settings.
* [`useStore`](https://docs.salla.dev/twilight/react/hooks/use-store) reads the settings you pass in.
* [Languages and RTL](https://docs.salla.dev/twilight/react/guide/languages-and-rtl): the day names and AM/PM are translated.