useStore
Read the current store's name, logo, settings and other data, and re-read it from the Salla SDK on demand.
Use useStore when a component needs the merchant's store data, such as its name, logo, contact details or settings.
Example
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
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
- 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
- Store data: every field of the object this hook returns, with example values.
useThemereads the theme's colours, font and settings.- Hooks and slots