Open UX React Library

The Open UX React Library is the ideal companion for React developers looking to get up-and-running with Open UX. The library contains a range of components that allow you to spend more time crafting the user experience and less time thinking about the underlying API calls.

If you haven't used this library before, read the Quick Start guide.

Installation

To add the Open UX React Library to a project, install it via Artifactory:

note

You must obtain your own Artifactory credentials to complete this step.

In the command line or terminal, run the following commands:

1. Set the default npm registry for Open UX scoped packages.

   npm config set @transact-open-ux:registry https://internal-artifactory.avoka.com/artifactory/api/npm/npm/

2. Authenticate the npm client to Artifactory.

   npm login --registry https://internal-artifactory.avoka.com/artifactory/api/npm/npm/

   This command prompts you to press Enter then log into Artifactory in the browser with your username and password. Once authenticated in the browser you can return to the command line.

3. Verify your ~/.npmrc file has content similar to the following:

   @transact-open-ux:registry=https://internal-artifactory.avoka.com/artifactory/api/npm/npm/
   //internal-artifactory.avoka.com/artifactory/api/npm/npm/:_authToken=<_authToken>

4. Install the @transact-open-ux/react package.

   npm

   npm install --save @transact-open-ux/react

   Yarn

   yarn add @transact-open-ux/react

You also need to install the following peer dependencies:

• @transact-open-ux/core >= 24.4.1
• react >= 18.2.0
• react-dom >= 18.2.0
• formik >= 1.3.1

These are available via Artifactory and npm or Yarn.

npm

npm install --save @transact-open-ux/core react react-dom formik

Yarn

yarn add @transact-open-ux/core react react-dom formik

When the dependencies are installed, import the React components into your files:

import {
  TransactProvider,
  TransactForm,
  PageController,
  PageProvider,
  Page,
} from "@transact-open-ux/react";

Example Form

This example uses Yup for validation.

import React from 'react';
import ReactDOM from 'react-dom';
import * as Yup from 'yup';
import {
  TransactProvider,
  TransactForm,
  PageController,
  PageProvider,
  Page,
} from '@transact-open-ux/react';

ReactDOM.render(
  <TransactProvider>
    <PageProvider>
      <TransactForm
        validationSchema={Yup.object().shape({
          Email: Yup.string()
            .email('Enter a valid email address e.g. [email protected]')
            .required('Email is Required'),
          Password: Yup.string()
            .min(2, 'Password is too Short!')
            .required('Password is Required'),
        })}
      >
        {props => {
          const {
            values,
            touched,
            handleChange,
            handleBlur,
            errors,
            isSubmitting,
            handleSubmit,
          } = props;
          return (
            <form onSubmit={handleSubmit}>
              <PageController>
                <Page id="PageOne" offMenu>
                  My landing page
                </Page>
                <Page id="GettingStarted">
                  <input
                    type="email"
                    name="Email"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.email}
                  />
                  {errors.email && touched.email && errors.email}
                  <input
                    type="password"
                    name="Password"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.password}
                  />
                  {errors.password && touched.password && errors.password}
                </Page>
                <Page id="SubmitSuccess" offMenu>
                  I Have submitted my form
                </Page>
              </PageController>
              <PageConsumer>
                {props => {
                  const {
                    navigate,
                    currentPageMeta: { offMenu },
                    disableBack,
                    disableSubmit,
                  } = props;

                  return !offMenu ? (
                    <nav>
                      {!disableBack && (
                        <button type="button" onClick={() => navigate('back')}>
                          Back
                        </button>
                      )}
                      {disableSubmit ? (
                        <button type="button" onClick={() => navigate('forward')}>
                          Continue
                        </button>
                      ) : (
                        <button type="submit" disabled={isSubmitting}>
                          Submit
                        </button>
                      )}
                    </nav>
                  ) : null;
                }}
              </PageConsumer>
            </form>
          );
        }}
      </TransactForm>
    </PageProvider>
  </TransactProvider>,
  document.getElementById('root')
);

Dispatching API Calls

You can trigger Journey Manager API calls via the <TransactConsumer /> component or the withTransact higher order component.

The following example calls the userSave method via the <TransactConsumer /> render props. For an example using withTransact, see React Components > withTransact.

import React from 'react';
import { TransactConsumer } from '@transact-open-ux/react';

const SaveButton = props => {
 return (
   <TransactConsumer>
         {props => (
            <button type="button" onClick={() => props.userSave(props.formApi.values)}>
             Click To Save Application
           </button>
         )}
   </TransactConsumer>
 )
};

export default SaveButton;