Hooks and Utils
In addition to common components, Theme Rendering engine also injects some common useful hooks and helper functions to the theme build, the hooks and functions can be imported from a global package viz.fdk-core/utils
useGlobalStore
The React hook allows the theme developers to subscribe to a slice of the Redux store. It's a direct extension of React-Redux’s useSelector
hook. The useGlobalStore
hook is built for direct compatibility with the getters available in fpi.getters
.
Example:
import React from 'react';
import { useGlobalStore } from 'fdk-core/utils';
function Home({ fpi }) {
/**
* Get PAGE data from store
*/
const page = useGlobalStore(fpi.getters.PAGE) || {};
/**
* Rendering Logic Here
*/
return (
<p>Home Component</p>
);
}
useClientInfo
The useClientInfo
hook provides an easy access to client-specific information such as themeCookie
and userAgent
throughout your React theme. This enables the theme application to adapt to it's behavior and appearance based on user preferences and client device details.
Purpose
The primary usage of useClientInfo
is to:
- Provide global access to
themeCookie
anduserAgent
data without passing props through every component level. - Enhance user experience by dynamically adjusting themes and layouts according to the user's setting and client device characteristics.
- Improve code maintainability by centralizing client information retrieval and usage into a single, reusable hook.
- Work in SSR, the hook also works during Server-side rendering (SSR).
Context Values
themeCookie
: A value representing the user's preferred theme (e.g light or dark mode), stored in a browser cookie.userAgent
: A string that provides information about the client's browser, device and operating system, extracted from the request headers.
How to use useClientInfo
To use the Hook in your React components, follow these steps:
- Import the hook from the utility library where it's defined.
import { useClientInfo } from 'fdk-core/utils';
- Use the hook in your component.
const MyComponent = () => {
const { userAgent, themeCookie } = useClientInfo();
const themeClass = themeCookie === 'dark' ? 'dark-theme' : 'light-theme';
return (
<div className={themeClass}>
<p>Welcome! Your user agent is: {userAgent}</p>
</div>
);
};
Use-cases
- Dynamic Theming: Switch between light and dark-themes based on the
themeCookie
value. - Device-Specific Customization: Adjust UI components or load specific assets based on the
userAgent
string. - Responsive Layouts: Optimize layouts and interactions for different devices using the information provided by the
userAgent
.
Conclusion
The useClientInfo
hook is a powerful tool for managing client-specific data in a React application. By integrating the hook, developers can create more responsive, user-friendly applications that can adapt to individual's user preference and device capabilities.
getPageSlug
The getPageSlug
takes the router object and returns the page slug of the current route, which is used to fetch page specific data from the APIs.
Example:
import { getPageSlug } from 'fdk-core/utils';
export async function pageDataResolver({ fpi, router, themeId }) {
const state = fpi.store.getState();
const pageValue = getPageSlug(router);
const APIs = [];
const currentPageInStore = state?.theme?.page?.value ?? null;
if (pageValue !== currentPageInStore) {
APIs.push(
fpi.theme.fetchPage({
pageValue,
themeId,
}),
)
}
return Promise.all(APIs).catch(console.log);
}