About UI Kit

UI Kit has enhanced performance and features, such as native rendering and ease of use. With everything happening directly in the browser, your app doesn't need to call a separate server-side function for every state change. With more React features you can now access capabilities directly from React.

Let’s look at what UI Kit offers:

Components

Explore UI Kit components, which are reusable building blocks designed to streamline the development of user interfaces.

React runtime

UI Kit runs the app in a React runtime, which enables you to use some React features.

Hooks

To import hooks to your app:

import React, { <hook name>} from 'react';

You should be able to use any React hooks that do not rely on an underlying DOM node or depend on any synchronous operations in the browser’s event loop. Hooks are now imported from react.

Supported hook types

• useState

• useEffect

• useContext

• useReducer

• useCallback

• useMemo

• useRef

• useDebugValue

• useDeferredValue

• useId

For more information on Hooks, see the Hooks API Reference official page.

Context

Forge UI Kit allows you to use the React context in your apps. For more information, see Context - React documentation.

JSX support

UI Kit supports JSX syntax, enabling developers to write declarative and highly readable code.

API requests

Making API requests in UI Kit is the same as in Custom UI. Whether a request is made from the client side or from the lambda depends on the request type.

Product fetch requests

Product fetch requests can be made in the frontend through @forge/bridge, i.e. in your App.js file. See requestJira, requestConfluence and requestBitbucket for documentation.

Non-product fetch requests and the storage API

These requests will need to go through the lambda, and so you will need to set up a Resolver. See Forge resolver.

Product context

Retrieve product context via the getContext method on @forge/bridge. See Forge bridge view.

1
2
import { view } from '@forge/bridge';
const context = await view.getContext();

Known limitations and issues

Limitations

• You won’t have access to any of the underlying DOM, so features that depend on that will not work. This includes portals and forwarding refs. You also still cannot use arbitrary HTML, and are restricted to using the components exported from @forge/react.

Issues

• Using TypeScript for resolver files causes deployment failures. You will get an error like TS2304: Cannot find the name “Forge UI“ when doing a forge deploy. You can work around this by adding a rule into the tsconfig.json file to only include the src file.