Skip to main content

Getting Started

Installation​

Qualtrics UI React is available as an npm package. To install, run:

npm install @qualtrics/ui-react

Peer Dependencies​

The following are required in order for this library to work properly:

  • react >= 16.8.0
  • react-dom >= 16.8.0

TypeScript​

For those using TypeScript, @qualtrics/ui-react requires a minimum version of TypeScript 3.9. See TypeScript documentation for more information.

Setup​

In order to use the library, you will need to wrap your app in the top-level UI Provider component and pass in translations, as shown below:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import getTranslations from './utils/getTranslations';

// 1. import UIProvider component
import { UIProvider } from '@qualtrics/ui-react';

// 2. Wrap your app in the UIProvider component
// 3. Pass in translations for components that require them
const Root = () => (
    <UIProvider
        config={{
            localizedText: getTranslations(),
        }}
    >
        <App />
    </UIProvider>
);

ReactDOM.render(<Root />, document.getElementById('my-app'));

Styles​

If qstrap is already loaded on your page, you can skip this section since the css resets and fonts are already loaded!!

All components styles are built into their respective components. However, the global styles such as css resets and fonts are found in a separate package. To install them, run:

npm install @qualtrics/base-styles

You will then need to include the @qualtrics/base-styles/dist/base-styles.css file in your application. There are two common ways to do this:

Option 1​

Use a bundler, such as webpack, that is configured to handle importing css files

import '@qualtrics/base-styles/dist/base-styles.css';

Option 2​

In your build step, copy the files found in @qualtrics/base-styles to your public assets folder and link to the css file inside your html file

<html lang="en">
    <head>
        <link
            rel="stylesheet"
            href="/some/path/@qualtrics/base-styles/dist/base-styles.css"
        />
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Example Usage​

You're all set. You can start using the components now!

import React from 'react';
import { Button } from '@qualtrics/ui-react';

const App = () => <Button kind="primary">Click Me</Button>;

export default App;