Skip to main content
Version: 3.x

React

This documentation will cover all React dedicated APIs provided by the Front-Commerce core.

To help you creating the best front-end with React, we've created convenient React hooks and components that you can reuse in your application.

useConditionalCallOnMount

Execute a callback when component is mounted if a condition is met.

useConditionalCallOnMount(condition, callback);

Arguments:

NameTypeDescription
conditionbooleanSpecify if the callback must be executed
callbackfunctionA function that must be executed if condition is true

Example:

import { useConditionalCallOnMount } from "@front-commerce/core/react";

const AcmeComponent = ({ props }) => {
const logOnMount = () => {
console.log("I am mounted");
};

useConditionalCallOnMount(props.shouldLogOnMounted, logOnMount);

return <div>Acme Component</div>;
};

useIsMount

A variable that return true or false depending of the component mount status

useIsMount();

Return: boolean

Example:

import { useIsMount } from "@front-commerce/core/react";

const AcmeComponent = ({ props }) => {
const isMounted = useIsMount();

return (
<div>
{isMounted ? "Component is mounted" : "Component isn't mounted yet"}
</div>
);
};

useItemsValidityCheck

caution

We recommend you to don't use this API in your application (unless you have a specific use-case that can match this method behaviour).

Return an object to tell the status of validty of an array (mostly used in the context of cart items).

useItemsValidityCheck(items);

Arguments:

NameTypeDescription
itemsArrayan array of object that have a property named valid

Return

Object:

NameTypeDescription
allValidityResolvedbooleanall items contains a valid property
hasValidbooleanarray contain at least one item with valid property
allValidbooleanall items have valid property with value true

useCallbackModal

Manage interactions with a modal and its state.

const modalCallback = useCallbackModal();

Return

Object:

NameTypeDescription
isOpenbooleanmodal state (closed or opened)
onRequestClosefunctionmethod that must be passed as prop when modal request a close
onSuccessfunctionmethod that must be passed as prop when modal action succeed
openCallbackModalfunctionmethod that is the callback after modal cycle execution

Example : see useEnsureLoggedInPromise.jsx

NoPermissionProvider

Component context provider.

<NoPermissionProvider>
<MyChildrenComponent />
</NoPermissionProvider>

Restricted

Component wrapper to prevent access to pages

<Restricted to={to}>{children}</Restricted>

Props:

NameTypeDescription
tostringAuthorisation name
childrencomponentComponent to display

Example:

<Restricted to="acme.access">
<Link to="acme/access">Restricted access</Link>
</Restricted>

useNoPermissions

Check if the user have the permission

Example :

const authorization = useNoPermissions();
const { isAllowedTo } = authorisation;

return <div>User authorisation status : {isAllowedTo ? "yes" : "no"}</div>;

trackPage

Not meant to be used directly, we recommend that you use useTrackPage from @front-commerce/remix instead

import { trackPage } from "@front-commerce/core/react";

function AcmePage() {
useEffect(() => {
trackPage("Acme Page");
}, []);

return <div>Acme Page</div>;
}

trackEvent

Track an event on page.

import { trackEvent } from "@front-commerce/core/react";

function AcmePage() {
return (
<button onClick={() => trackEvent("Acme Page click")}>Acme Page</button>
);
}

usePublicConfig

Returns the public configuration of the Front-Commerce instance within a React component. This hook is designed to be used inside React components where you need to access the global configuration. It ensures the component re-renders when the configuration changes.

import { usePublicConfig } from "@front-commerce/core/react";

function PasswordHint() {
const publicConfig = usePublicConfig();

// Hide password hint button based on the public configuration
if (publicConfig?.publicConfig?.password?.disablePasswordHint) {
return null;
}

return <button>👁️</button>;
}
note

Prefer using usePublicConfig in React components to automatically handle updates to the configuration. It's the recommended approach to maintain reactiveness and consistency within your component tree.

getPublicConfig

Similar to usePublicConfig, this function returns the public configuration of the Front-Commerce instance. However, it's designed for use outside of React components, such as in utility functions or server-side logic where React's hook system is not available.

import { getPublicConfig } from "@front-commerce/core/react";

const publicConfig = getPublicConfig();

function validatePasswordStrength(password) {
if (publicConfig?.publicConfig?.password?.strongPasswordRequired) {
// Perform strong password validation
} else {
// Perform basic password validation
}
}
note

Use getPublicConfig as a last resort or in scenarios where React's context is not applicable. It's ideal for server-side rendering, utility functions, or any non-React part of your application. This method will not trigger re-renders in React components.