Skip to main content
Find below the list of some basic utility files and funcitons:

​
ExpComponentDataDispatcher

We have learned about creating and using both default and custom components. Both types of components utilize a method called ExpComponentDataDispatcher. The ExpComponentDataDispatcher is an integrated feature that facilitates the management and proper display of API data. It relies on the foundational use of useReducer in React. To understand this functionality, it is important for the user to have a basic knowledge of useReducer Here, we have three props:
  1. id
  2. modelInternalName
  3. modelKeyForSSR
Moving on to the useReducer in ExpComponentDataDispatcher, dataOfComponentDispatcher stores data, while componentDataDispatcher is used to set data. The dispatcher includes three cases along with a default case.
  1. initializingFreeForm: If the user is creating a component with free form support, in this scenario, the componentData will be cleared, the isLoading flag will be set to false, and the component will return to its initial state.
  2. fetchingData: If the user is creating a Default Component or a Content-Library-based component, the execution of the dispatcher will occur before the API call. In this scenario, the isLoading property is set to true, and the componentData is cleared or emptied. This ensures that the component reverts to its initial state with a loader.
  3. dataFetched: This case is also applicable to the Default Component. The purpose of this scenario is to store the fetched API data in the componentData variable and then pass it to the Default Component. It will likely be invoked after the second case i.e fetchingData. Additionally, the isLoading property is set to false as we don’t require a loader after obtaining the data.
  4. default: This case is specifically designed to handle errors that may occur if the user has added any unidentified values.
We utilize constants instead of strings to mitigate typographical errors. Therefore, it is considered a best practice for users to employ constants rather than strings.

​
getContentLibraryData

The function below utilizes the ContentService from the experro-storefront to send an API request that retrieves data from the admin panel. In order to achieve this, we must provide the following values as parameters: 1. parsedContentModel: It contains the ID of the content-model and the current_version_id associated with that specific content-model. 2. modelInternalName: It contains the model internal name of that component. For example, the modelInternalName for the Title-Section is ‘title_section’. All the modelInternalNames are passed through a file named src/utils/constants-model-internal-name.ts. 3. modelKeyForSSR: The modelKeyForSSR is used to ensure that each components are identical. String is assigend as value in modelKeyForSSR 4. id: Every component has a unique ID (CSS selector) assigned to ensure their identicity.
Note: Both ‘modelKeyForSSR’ and ‘id’ are used to ensure that each components are identical.

​
linkParser

In the utils/ directory you can find a file link-parser.tsx. The ExpLinkParser is a component which can be used instead of <a/> tag or the react’s <link/> tag. 
<ExpLinkParser to={'http://example.com'}>
  Example
</ExpLinkParser>
The linkParser function detect’s that the url you provided is internal or external dynamically and render’s basic <a/> tag or react’s <link/> tag accordingly. Props
proptypedescription
toStringURL to be re-directed when user clicks on linkParser
targetStringGive _blank as target prop if you want to open the url in new tab, by default the target will be _self
classNameStringTo define custom class using className prop
dangerouslySetInnerHTMLhtmlWith dangerouslySetInnerHTML you can insert html inside the linkParser tag
titleStringTitle prop to provide a title to the linkParser tag
onClickFunctionYou can also use onClick method with the this prop
stylelinkParserStyle()You can give style by calling linkParserStyle() function from src/utils/link-parser-style.tsx component.
Arguments for linkParserStyle are: buttonHoverColor, buttonTextHoverColor, buttonColor, buttonTextColor, linkTextHoverColor, linkLinkColor, linkTextColor,

​
modelInternalName

Create a constant object that contains the content model name passed in the API, ensuring that it returns the corresponding data from the content library. Whenever a user creates a new model in the admin panel for a new widget, make sure to append the model name in src/utils/constants-model-internal-name.ts. For example, if we have created a new model in the admin panel named ‘Blog Details’, add a new key-value pair as blog_details: "blog_details" to the modelInternalName object in src/utils/constants-model-internal-name.ts

​
Warning

It is necessary to provide the correct value in modelInternalName as it is used to retrieve data from the API. The name should be identical, with all capital letters converted to lowercase and all space between words replaced with underscores. ( _ )

​
getColorDefaultValueObject

This functionality is utilized to pass the default color value to the color-picker widget.The component getColorDefaultValueObject can be found in src/utils/color-default-object.ts file. It requires two parameters.
  1. value: This parameter is used to specify the default color value to be set in the color-picker.
  2. defaultValue: This parameter is used to reset the modified color value back to its default in the color-picker.
Note: This function is only utilized in the widget file when the user integrates a color picker within that widget.

​
expColorObjectParser

The expColorObjectParser is a useful component in src/utils/color-object-parser.ts when user needs a color picker in their trait. It is utilized in the component file located at src/components/cms-library/component-folder (e.g., title-section) in the component.tsx (e.g. title-section.tsx) file. Within this file, user receive a prop that contains the color base data, and the expColorObjectParser function returns the specific color name that the user has selected from the color picker. Let me provide an example to illustrate its usage: 
const ExpComponentName = (props: ExpComponentNameProps) => {
  const { headingColor, descriptionColor } = props;
  const headingStyle: React.CSSProperties = {
    color: expColorObjectParser(headingColor),
  };
  const descriptionStyle: React.CSSProperties = {
    color: expColorObjectParser(descriptionColor),
  };

  return (
    <div>
      <h1 style={headingStyle}>Here Comes Heading</h1>
      <p style={descriptionStyle}>Here Comes description</p>
    </div>
  );
};
Simply pass the prop as a parameter to expColorObjectParser and it will return the color that the user can utilize as demonstrated above.

​
convertCurrency

This component converts the amount to the specified currency. It can be imported from src/utils/currency-converter and can take two arguments:
  1. The price of the product.
  2. The currency rate, which can be obtained through an API.