Create and add a ReactJS component to the toolbox

Introduction

Step-by-step instructions

1. Create the React Module

Start by creating a Module. For our example, name it “CurrencyFormat”.

Remove the default content and replace it by the following ReactJS code and save the component.

import React from "react";
import Box from "@esm/components/web/Box";

const CurrencyFormat = ({ amount, ...props }) => {

  const formatter = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  });

  return <Box {...props}> {formatter.format(amount)} </Box>;
};

export default CurrencyFormat;

To make your component compatible with the existing styling system, you must use a “Box” as a root element (rather than a “div”). You must also receive props (...props) and pass them to Box, as the platform uses props to propagate a lot of information through components.

2. Add the component to the toolbox

Create a new Entity named “CurrencyFormat”. This requires a hack. Eventually, the IDE will offer better support for this.

a. Create a temporary Aggregate named “Temp"

b. Right-click -> Add Entity. Name it "CurrencyFormat".

c. Click on the Entity and, in the Properties Panel, change its low type to “Component”.

d. The component will move to “unreferenced components”.

e. Delete the “Temp” Aggregate

On the CurrencyFormat Entity, create a field for each React prop. In this example, we have a single prop, which is “amount”.

Add a command named “configure” and add the props as parameters.

Add a "moduleId" attribute to the Entity, with the full name of the module (without the .jsx) '@dazzm/training/CurrencyFormat'

The component is now available in the toolbox:

3. Use and Configure the Component

Go to a page and drop the component onto it.

Activate the Attributes panel. Notice how the props have become configurable, just like any other component delivered with the platform.

Conclusion

You’ve successfully created and configured a reusable React component for currency formatting, integrating it into the platform’s toolbox with full configurability. This component can now be used across pages, ensuring consistent currency display throughout the application. For future improvements, consider adding more custom components or expanding functionality with additional React props to enhance the UI's modularity.