# useStore (https://docs.salla.dev/twilight/react/hooks/use-store)



Use `useStore` when a component needs the merchant's store data, such as its name, logo, contact details or settings.

## Example [#example]

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

export function StoreName() {
  const { name, logo, url } = useStore();
  return (
    <a href={url}>
      <img src={logo} alt={name} />
    </a>
  );
}
```

## API [#api]

```ts
function useStore(): UseStoreResult;

interface UseStoreResult extends Store {
  refresh: () => Promise<void>;
}
```

| Prop       | Type                  | Description                                                                        |
| ---------- | --------------------- | ---------------------------------------------------------------------------------- |
| `name`     | `string`              | Store name.                                                                        |
| `logo`     | `string`              | Logo URL.                                                                          |
| `url`      | `string`              | Store home URL.                                                                    |
| `settings` | `StoreSettings`       | Store-level settings (auth, cart, product and more).                               |
| `contacts` | `StoreContacts`       | Contact details.                                                                   |
| `social`   | `StoreSocial`         | Social links.                                                                      |
| `country`  | `string`              | Store country code, such as `"SA"`.                                                |
| `refresh`  | `() => Promise<void>` | Re-reads the store from the Salla SDK config and merges it into the current store. |

The result has every field of the `Store` type. The table lists the common ones.

## Gotchas [#gotchas]

* Data comes from the provider at the root of your app, so it is available during server rendering and in the browser.
* The hook returns a new object on every render. Don't use the whole result as a dependency of `useEffect`; depend on the fields you read.
* `refresh()` does nothing when the Salla SDK is not loaded yet, and ignores errors, leaving the store unchanged.

## Next [#next]

* [Store data](https://docs.salla.dev/twilight/react/data/store): every field of the object this hook returns, with example values.
* [`useTheme`](https://docs.salla.dev/twilight/react/hooks/use-theme) reads the theme's colours, font and settings.
* [Hooks and slots](https://docs.salla.dev/twilight/react/guide/hooks-and-slots)